вынесен заголовок регистрации

src/container/signup/index.tsx

@@ -2,27 +2,30 @@ import * as React from 'react';
 import {Button, TextField, Grid, Box,
   Typography, Container
 } from '@mui/material';
-import Photo from './photo/photo';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
+import Title from './title';
+import Photo from './photo';
 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 makeAnimated from 'react-select/animated';
 import { useState } from 'react';
 import { useConstant } from '../Constant';
 
-const animatedComponents = makeAnimated();
-const theme = createTheme();
-
 
 const SingUpPage = (): React.ReactElement => {
   const [selectedPhoto, setSelectedPhoto] = useState(null);
   const [selectedOption, setSelectedOption] = useState<string | null>(null);
+
+  const handlePhotoChange = (photo) => {
+    setSelectedPhoto(photo);
+  };
+
   const handleChange = (selectedOption) => {
     setSelectedOption(selectedOption);
   };
+
+
   const { interests } = useConstant();
   //const { user_id, username, onClose } = useTelegram();
   /*
@@ -45,12 +48,7 @@ const SingUpPage = (): React.ReactElement => {
   };
   */
 
-  const handlePhotoChange = (photo) => {
-    setSelectedPhoto(photo); // Сохраняем выбранное изображение
-  };
-
   return (
-    <ThemeProvider theme={theme}>
       <Container component="main" maxWidth="xs">
         <Box
           sx={{
@@ -60,9 +58,7 @@ const SingUpPage = (): React.ReactElement => {
             alignItems: 'center',
           }}
         >
-          <Typography component="h1" variant="h5">
-            Регистрация
-          </Typography>
+          <Title>Регистрация</Title>
           <Box component="form" noValidate  sx={{ mt: 3 }}>
             <Grid container spacing={2}>
               <Grid item xs={12} sm={6}>
@@ -119,7 +115,6 @@ const SingUpPage = (): React.ReactElement => {
                 <Select
                   onChange={handleChange}
                   closeMenuOnSelect={false}
-                  components={animatedComponents}
                   isMulti
                   options={interests}
                   className="basic-multi-select"
@@ -138,7 +133,6 @@ const SingUpPage = (): React.ReactElement => {
           </Box>
         </Box>
       </Container>
-    </ThemeProvider>
   );
 };
 

src/container/signup/photo/index.style.ts

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+import Avatar from "@mui/material/Avatar";
+
+export const PhotoStyled = styled.div`
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+`;
+
+export const AvatarStyled = styled(Avatar)`
+  width: 200px;
+  height: 200px;
+`;
+
+export const InputStyled = styled.input`
+  display: none;
+`;

src/container/signup/photo/index.tsx

@@ -1,23 +1,8 @@
-import React, { useState } from 'react';
-import styled from '@emotion/styled';
-import Avatar from "@mui/material/Avatar";
+import * as React from 'react';
+import { useState } from 'react';
+import { AvatarStyled, PhotoStyled, InputStyled } from './index.style';
 
-const PhotoStyled = styled.div`
-  position: relative;
-  display: inline-block;
-  cursor: pointer;
-`;
-
-const AvatarStyled = styled(Avatar)`
-  width: 200px;
-  height: 200px;
-`;
-
-const InputStyled = styled.input`
-  display: none;
-`;
-
-function Photo({ defaultPhoto, onPhotoChange }) {
+const Photo = ({ defaultPhoto, onPhotoChange }): React.ReactElement => {
   const [photo, setPhoto] = useState(defaultPhoto);
 
   const handleFileChange = (event) => {

src/container/signup/title/index.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';;
+import Typography from '@mui/material/Typography';
+
+const Title = ({children}): React.ReactElement => {
+    return (
+        <Typography component="h1" variant="h5">
+            {children}
+        </Typography>
+    );
+}
+
+export default Title;