From ca360b2451f7a76a4f508e7b263af76ee300a561 Mon Sep 17 00:00:00 2001
From: admin <rebbit123456@gmail.com>
Date: Tue, 10 Dec 2024 19:45:51 +0300
Subject: [PATCH] =?UTF-8?q?=D1=84=D1=83=D0=BD=D0=BA=D1=86=D0=B8=D0=BE?=
 =?UTF-8?q?=D0=BD=D0=B0=D0=BB=20=D0=B7=D0=B0=D0=B3=D1=80=D1=83=D0=B7=D0=BA?=
 =?UTF-8?q?=D0=B8=20=D1=84=D0=BE=D1=82=D0=BE=D0=B3=D1=80=D0=B0=D1=84=D0=B8?=
 =?UTF-8?q?=D0=B8=20=D0=B2=D1=8B=D0=BD=D0=B5=D1=81=D0=B5=D0=BD=20=D0=B2=20?=
 =?UTF-8?q?=D0=BE=D1=82=D0=B4=D0=B5=D0=BB=D1=8C=D0=BD=D1=8B=D0=B9=20=D0=B1?=
 =?UTF-8?q?=D0=BB=D0=BE=D0=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/container/signup/index.tsx       | 44 ++++----------------
 src/container/signup/photo/photo.tsx | 62 ++++++++++++++++++++++++++++
 src/container/signup/photo/types.ts  |  0
 3 files changed, 71 insertions(+), 35 deletions(-)
 create mode 100644 src/container/signup/photo/photo.tsx
 create mode 100644 src/container/signup/photo/types.ts

diff --git a/src/container/signup/index.tsx b/src/container/signup/index.tsx
index f2aead8..953c604 100644
--- a/src/container/signup/index.tsx
+++ b/src/container/signup/index.tsx
@@ -1,12 +1,8 @@
 import * as React from 'react';
-import Avatar from '@mui/material/Avatar';
-import Button from '@mui/material/Button';
-import CssBaseline from '@mui/material/CssBaseline';
-import TextField from '@mui/material/TextField';
-import Grid from '@mui/material/Grid';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import Container from '@mui/material/Container';
+import {Button, TextField, Grid, Box,
+  Typography, Container
+} from '@mui/material';
+import Photo from './photo/photo';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import axios from 'axios';
 import student_icon from './student-icon.png';
@@ -22,7 +18,7 @@ const theme = createTheme();
 
 
 const SingUpPage = (): React.ReactElement => {
-  const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
+  const [selectedPhoto, setSelectedPhoto] = useState(null);
   const [selectedOption, setSelectedOption] = useState<string | null>(null);
   const handleChange = (selectedOption) => {
     setSelectedOption(selectedOption);
@@ -48,28 +44,14 @@ const SingUpPage = (): React.ReactElement => {
     onClose();
   };
   */
-  const handleAvatarClick = () => {
-    const fileInput = document.getElementById('avatar-input') as HTMLInputElement;
-    fileInput.click();
+
+  const handlePhotoChange = (photo) => {
+    setSelectedPhoto(photo); // Сохраняем выбранное изображение
   };
 
-  const handleAvatarChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files[0];
-    const reader = new FileReader();
-
-    reader.onload = () => {
-      setAvatarUrl(reader.result as string);
-    };
-
-    reader.readAsDataURL(file);
-  };
-
-
-
   return (
     <ThemeProvider theme={theme}>
       <Container component="main" maxWidth="xs">
-        <CssBaseline />
         <Box
           sx={{
             marginTop: 8,
@@ -124,15 +106,7 @@ const SingUpPage = (): React.ReactElement => {
                 justifyContent="center"
                 sx={{ paddingTop: 7, paddingLeft: 3 }}
               >
-                <Avatar src={avatarUrl || student_icon} onClick={handleAvatarClick} sx={{ width: 200, height: 200 }}/>
-                <input
-                  type="file"
-                  name="image"
-                  accept="image/*"
-                  onChange={handleAvatarChange}
-                  style={{ display: 'none' }}
-                  id="avatar-input"
-                />
+              <Photo defaultPhoto={student_icon} onPhotoChange={handlePhotoChange} />
               </Grid>
               <Grid
                 container
diff --git a/src/container/signup/photo/photo.tsx b/src/container/signup/photo/photo.tsx
new file mode 100644
index 0000000..3b0fbc8
--- /dev/null
+++ b/src/container/signup/photo/photo.tsx
@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import styled from '@emotion/styled';
+import Avatar from "@mui/material/Avatar";
+
+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, setPhoto] = useState(defaultPhoto);
+
+  const handleFileChange = (event) => {
+    const file = event.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+
+      reader.onload = (e) => {
+        const newPhoto = e.target.result;
+        setPhoto(newPhoto);
+        if (onPhotoChange) onPhotoChange(newPhoto); 
+      };
+
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleAvatarClick = () => {
+    const fileInput = document.getElementById('fileInput') as HTMLInputElement;
+    fileInput.click();
+  }
+
+  
+  return (
+    <PhotoStyled>
+      <AvatarStyled
+        src={photo}
+        alt="Выберите фотографию"
+        onClick={handleAvatarClick}
+       />
+      <InputStyled
+        id="fileInput"
+        type="file"
+        accept="image/*"
+        onChange={handleFileChange}
+      />
+    </PhotoStyled>
+  );
+  
+}
+
+export default Photo;
diff --git a/src/container/signup/photo/types.ts b/src/container/signup/photo/types.ts
new file mode 100644
index 0000000..e69de29