diff --git a/.gitignore b/.gitignore
index d6fd664..5334697 100644
--- a/.gitignore
+++ b/.gitignore
@@ -128,4 +128,6 @@ dist
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
-.pnp.*
\ No newline at end of file
+.pnp.*
+
+ngrok.exe
\ No newline at end of file
diff --git a/src/app.tsx b/src/app.tsx
index 66b4b88..6f637f3 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,7 +1,17 @@
-import React from 'react';
+import React, {useEffect} from 'react';
import Main from './container/main';
+import useTelegram from './container/hooks/useTelegram';
const App = () => {
+ const { isScriptLoaded, onClose, onToggleButton, tg, user_id, username } = useTelegram();
+
+ useEffect(() => {
+ if (isScriptLoaded && tg) {
+ tg.ready(); // Инициализация WebApp после загрузки скрипта
+ console.log('Telegram WebApp готов:', tg);
+ }
+ }, [isScriptLoaded, tg]);
+
return ;
};
diff --git a/src/container/hooks/useTelegram.tsx b/src/container/hooks/useTelegram.tsx
index 7f6163b..18993ba 100644
--- a/src/container/hooks/useTelegram.tsx
+++ b/src/container/hooks/useTelegram.tsx
@@ -1,36 +1,61 @@
+import { useEffect, useState } from 'react';
declare global {
- interface Window {
- Telegram: {
- WebApp: any;
- };
- }
+ interface Window {
+ Telegram: {
+ WebApp: any;
+ };
}
-
-const useTelegram = () => {
-
- const tg = window.Telegram.WebApp;
- const onClose = () => {
- tg.close()
- }
-
- const onToggleButton = () => {
- if(tg.MainButton.isVisible) {
- tg.MainButton.hide();
- } else {
- tg.MainButton.show();
- }
- }
-
- return {
- onClose,
- onToggleButton,
- tg,
- user_id: tg.initDataUnsafe?.user?.id,
- user: tg.initDataUnsafe?.user,
- username: tg.initDataUnsafe?.user?.username,
- queryId: tg.initDataUnsafe?.query_id
- }
}
-export default useTelegram;
\ No newline at end of file
+const useTelegram = () => {
+ const [isScriptLoaded, setIsScriptLoaded] = useState(false);
+
+ useEffect(() => {
+ // Проверяем, был ли скрипт уже загружен
+ if (!window.Telegram) {
+ // Если Telegram API еще не доступен, загружаем скрипт
+ const script = document.createElement('script');
+ script.src = 'https://telegram.org/js/telegram-web-app.js';
+ script.async = true;
+ script.onload = () => {
+ setIsScriptLoaded(true); // Скрипт загружен
+ };
+ script.onerror = () => {
+ console.error('Ошибка при загрузке Telegram Web App SDK');
+ };
+ document.body.appendChild(script);
+ } else {
+ // Если Telegram Web App уже доступен, просто обновляем состояние
+ setIsScriptLoaded(true);
+ }
+ }, []);
+
+ // Логика, которая будет выполняться, когда скрипт загружен
+ const tg = window.Telegram?.WebApp;
+
+ const onClose = () => {
+ tg?.close();
+ };
+
+ const onToggleButton = () => {
+ if (tg?.MainButton?.isVisible) {
+ tg.MainButton.hide();
+ } else {
+ tg.MainButton.show();
+ }
+ };
+
+ return {
+ isScriptLoaded,
+ onClose,
+ onToggleButton,
+ tg,
+ user_id: tg?.initDataUnsafe?.user?.id,
+ user: tg?.initDataUnsafe?.user,
+ username: tg?.initDataUnsafe?.user?.username,
+ queryId: tg?.initDataUnsafe?.query_id,
+ };
+};
+
+export default useTelegram;
diff --git a/src/container/signup/about/index.style.ts b/src/container/signup/about/index.style.ts
new file mode 100644
index 0000000..6a9f85b
--- /dev/null
+++ b/src/container/signup/about/index.style.ts
@@ -0,0 +1,60 @@
+import styled from '@emotion/styled';
+import TextField from '@mui/material/TextField';
+
+export const AboutStyled = styled(TextField)`
+ & .MuiInputBase-input {
+ color: var(--tg-theme-text-color,rgba(0, 0, 0, 0.6));
+ }
+
+ & .MuiFormLabel-root {
+ color: var(--tg-theme-text-color, rgba(0, 0, 0, 0.6));
+ }
+
+ & .Mui-focused .MuiFormLabel-root {
+ color: var(--tg-theme-label-focus-color, #0066ff);
+ }
+
+
+ & .MuiOutlinedInput-root {
+ fieldset {
+ border-color: var(--tg-theme-border-color, #cccccc);
+ }
+
+ &:hover fieldset {
+ border-color: var(--tg-theme-border-hover, #888888);
+ }
+
+ &.Mui-focused fieldset {
+ border-color: var(--tg-theme-border-focused, #0066ff);
+ }
+
+ }
+
+ @media (prefers-color-scheme: dark) {
+ & .MuiInputBase-input {
+ color: var(--tg-theme-text-color-dark, #ffffff);
+ }
+
+ & .MuiFormLabel-root {
+ color: var(--tg-theme-label-color-dark, #ffffff);
+ }
+
+ & .Mui-focused .MuiFormLabel-root {
+ color: var(--tg-theme-label-focus-color-dark, #0066ff);
+ }
+
+ & .MuiOutlinedInput-root {
+ fieldset {
+ border-color: var(--tg-theme-border-color-dark, #ffffff);
+ }
+
+ &:hover fieldset {
+ border-color: var(--tg-theme-border-hover-dark, #777777);
+ }
+
+ &.Mui-focused fieldset {
+ border-color: var(--tg-theme-border-focused-dark, #0066ff);
+ }
+ }
+ }
+`;
\ No newline at end of file
diff --git a/src/container/signup/about/index.tsx b/src/container/signup/about/index.tsx
new file mode 100644
index 0000000..ddf20fc
--- /dev/null
+++ b/src/container/signup/about/index.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { AboutStyled } from './index.style';
+
+const About = ({rows, id, label, name, placeholder="Введите текст...", className = null}): React.ReactElement => {
+ return (
+
+ );
+}
+
+export default About;
\ No newline at end of file
diff --git a/src/container/signup/button/index.style.ts b/src/container/signup/button/index.style.ts
new file mode 100644
index 0000000..cb8c7a4
--- /dev/null
+++ b/src/container/signup/button/index.style.ts
@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+import Button from '@mui/material/Button';
+
+export const RegisterButtonStyled = styled(Button)`
+ background-color: var(--tg-theme-button-color);
+ color: var(--tg-theme-button-text-color);
+`;
\ No newline at end of file
diff --git a/src/container/signup/button/index.tsx b/src/container/signup/button/index.tsx
new file mode 100644
index 0000000..584c08e
--- /dev/null
+++ b/src/container/signup/button/index.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { RegisterButtonStyled } from './index.style';
+
+const RegisterButton = ({children, id = null, name = null, className = null}): React.ReactElement => {
+ return (
+
+ {children}
+
+ );
+}
+
+export default RegisterButton;
\ No newline at end of file
diff --git a/src/container/signup/index.css b/src/container/signup/index.css
index 7d39caf..5e94c02 100644
--- a/src/container/signup/index.css
+++ b/src/container/signup/index.css
@@ -1,7 +1,3 @@
-.upload-input {
- display: none;
-}
-
.basic-multi-select {
width: 100%;
}
\ No newline at end of file
diff --git a/src/container/signup/index.style.ts b/src/container/signup/index.style.ts
new file mode 100644
index 0000000..aa8fc5f
--- /dev/null
+++ b/src/container/signup/index.style.ts
@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+import { Grid2 } from '@mui/material';
+
+export const GridChildrenStyle = styled(Grid2)`
+ display: flex;
+ padding: 10px;
+ align-items: center;
+ justify-content: center;
+`;
\ No newline at end of file
diff --git a/src/container/signup/index.tsx b/src/container/signup/index.tsx
index d9df1b6..4f93048 100644
--- a/src/container/signup/index.tsx
+++ b/src/container/signup/index.tsx
@@ -1,17 +1,20 @@
import * as React from 'react';
-import {Button, TextField, Grid, Box,
- Typography, Container
+import {Button, Grid2, Box, Container
} from '@mui/material';
import Title from './title';
+import Name from './name';
+import About from './about';
import Photo from './photo';
+import Interests from './interests';
+import RegisterButton from './button';
import axios from 'axios';
import student_icon from './student-icon.png';
import "./index.css";
//import useTelegram from "../hooks/useTelegram";
import Select from 'react-select';
import { useState } from 'react';
-import { useConstant } from '../Constant';
-
+import { useConstant } from '../Constant';
+import { GridChildrenStyle } from './index.style';
const SingUpPage = (): React.ReactElement => {
const [selectedPhoto, setSelectedPhoto] = useState(null);
@@ -58,78 +61,52 @@ const SingUpPage = (): React.ReactElement => {
alignItems: 'center',
}}
>
-
Регистрация
+ Регистрация
-
-
-
+
+
-
-
-
+
+
+
-
-
-
+
+
-
-
-
-
-
-
-
-
+
+
+
diff --git a/src/container/signup/interests/index.style.ts b/src/container/signup/interests/index.style.ts
new file mode 100644
index 0000000..c824a4d
--- /dev/null
+++ b/src/container/signup/interests/index.style.ts
@@ -0,0 +1,68 @@
+import styled from '@emotion/styled';
+import Select from 'react-select';
+
+export const InterestsStyled = styled(Select)`
+ .select__control {
+ background-color: var(--tg-theme-bg-color, #ffffff);
+ border: 1px solid var(--tg-theme-border-color, #cccccc);
+ color: var(--tg-theme-text-color, #000000);
+ border-radius: 8px;
+ font-size: 14px;
+ box-shadow: none;
+
+ &:hover {
+ border-color: var(--tg-theme-border-hover, #888888);
+ }
+ }
+
+ .select__menu {
+ background-color: var(--tg-theme-bg-color, #ffffff);
+ border-radius: 8px;
+ box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+ z-index: 10;
+ }
+
+ .select__option {
+ background-color: transparent;
+ color: var(--tg-theme-text-color, #000000);
+ padding: 10px;
+ cursor: pointer;
+
+ &:hover {
+ background-color: var(--tg-theme-hover-color, #f2f2f2);
+ }
+
+ &.select__option--is-selected {
+ background-color: var(--tg-theme-selected-color, #0066ff);
+ color: #ffffff;
+ }
+
+ &.select__option--is-focused {
+ background-color: var(--tg-theme-hover-color, #e0e0e0);
+ }
+ }
+
+ .select__placeholder {
+ color: var(--tg-theme-placeholder-color, #888888);
+ font-size: 14px;
+ }
+
+ .select__multi-value {
+ background-color: var(--tg-theme-selected-color, #0066ff);
+ color: #ffffff;
+ border-radius: 4px;
+
+ .select__multi-value__label {
+ color: #ffffff;
+ }
+
+ .select__multi-value__remove {
+ color: #ffffff;
+
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.2);
+ color: #ffffff;
+ }
+ }
+ }
+`;
\ No newline at end of file
diff --git a/src/container/signup/interests/index.tsx b/src/container/signup/interests/index.tsx
new file mode 100644
index 0000000..ad2fc53
--- /dev/null
+++ b/src/container/signup/interests/index.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { InterestsStyled } from './index.style';
+
+const Interests = ({options, placeholder = "Выберите..."}): React.ReactElement => {
+
+ const [selectedInterests, setSelectedInterests] = useState(null);
+
+ const handleChange = (selectedInterests) => {
+ setSelectedInterests(selectedInterests);
+ };
+
+ return (
+
+ );
+}
+
+export default Interests;
\ No newline at end of file
diff --git a/src/container/signup/name/index.style.ts b/src/container/signup/name/index.style.ts
new file mode 100644
index 0000000..25f764a
--- /dev/null
+++ b/src/container/signup/name/index.style.ts
@@ -0,0 +1,60 @@
+import styled from '@emotion/styled';
+import TextField from '@mui/material/TextField';
+
+export const TextFieldStyled = styled(TextField)`
+ & .MuiInputBase-input {
+ color: var(--tg-theme-text-color,rgba(0, 0, 0, 0.6));
+ }
+
+ & .MuiFormLabel-root {
+ color: var(--tg-theme-text-color, rgba(0, 0, 0, 0.6));
+ }
+
+ & .Mui-focused .MuiFormLabel-root {
+ color: var(--tg-theme-label-focus-color, #0066ff);
+ }
+
+
+ & .MuiOutlinedInput-root {
+ fieldset {
+ border-color: var(--tg-theme-border-color, #cccccc);
+ }
+
+ &:hover fieldset {
+ border-color: var(--tg-theme-border-hover, #888888);
+ }
+
+ &.Mui-focused fieldset {
+ border-color: var(--tg-theme-border-focused, #0066ff);
+ }
+
+ }
+
+ @media (prefers-color-scheme: dark) {
+ & .MuiInputBase-input {
+ color: var(--tg-theme-text-color-dark, #ffffff);
+ }
+
+ & .MuiFormLabel-root {
+ color: var(--tg-theme-label-color-dark, #ffffff);
+ }
+
+ & .Mui-focused .MuiFormLabel-root {
+ color: var(--tg-theme-label-focus-color-dark, #0066ff);
+ }
+
+ & .MuiOutlinedInput-root {
+ fieldset {
+ border-color: var(--tg-theme-border-color-dark, #ffffff);
+ }
+
+ &:hover fieldset {
+ border-color: var(--tg-theme-border-hover-dark, #777777);
+ }
+
+ &.Mui-focused fieldset {
+ border-color: var(--tg-theme-border-focused-dark, #0066ff);
+ }
+ }
+ }
+`;
\ No newline at end of file
diff --git a/src/container/signup/name/index.tsx b/src/container/signup/name/index.tsx
new file mode 100644
index 0000000..2c4dd10
--- /dev/null
+++ b/src/container/signup/name/index.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { TextFieldStyled } from './index.style';
+
+const Name = ({id, label, name, autoComplete, className = null}): React.ReactElement => {
+ return (
+
+ );
+}
+
+export default Name;
\ No newline at end of file
diff --git a/src/container/signup/photo/index.style.ts b/src/container/signup/photo/index.style.ts
index f89a5b4..1fdfcc9 100644
--- a/src/container/signup/photo/index.style.ts
+++ b/src/container/signup/photo/index.style.ts
@@ -1,7 +1,7 @@
import styled from '@emotion/styled';
import Avatar from "@mui/material/Avatar";
-export const PhotoStyled = styled.div`
+export const PhotoStyled = styled.div<{ value: string | null }>`
position: relative;
display: inline-block;
cursor: pointer;
diff --git a/src/container/signup/photo/index.tsx b/src/container/signup/photo/index.tsx
index 649d60a..0462adf 100644
--- a/src/container/signup/photo/index.tsx
+++ b/src/container/signup/photo/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { useState } from 'react';
import { AvatarStyled, PhotoStyled, InputStyled } from './index.style';
-const Photo = ({ defaultPhoto, onPhotoChange }): React.ReactElement => {
+const Photo = ({ defaultPhoto = null, onPhotoChange }): React.ReactElement => {
const [photo, setPhoto] = useState(defaultPhoto);
const handleFileChange = (event) => {
diff --git a/src/container/signup/title/index.style.ts b/src/container/signup/title/index.style.ts
new file mode 100644
index 0000000..aa0a89a
--- /dev/null
+++ b/src/container/signup/title/index.style.ts
@@ -0,0 +1,6 @@
+import styled from '@emotion/styled';
+
+export const TitleStyled = styled.h1`
+ font-size: 28px;
+ color: var(--tg-theme-text-color);
+`;
\ No newline at end of file
diff --git a/src/container/signup/title/index.tsx b/src/container/signup/title/index.tsx
index b154884..fda0a63 100644
--- a/src/container/signup/title/index.tsx
+++ b/src/container/signup/title/index.tsx
@@ -1,11 +1,11 @@
import * as React from 'react';;
-import Typography from '@mui/material/Typography';
+import { TitleStyled } from './index.style';
const Title = ({children}): React.ReactElement => {
return (
-
+
{children}
-
+
);
}