front-hub/src/pages/AccountSetup.tsx

import { Box, Button, Link, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomButton from "@components/CustomButton";
import InputTextfield from "@components/InputTextfield";
import SectionWrapper from "@components/SectionWrapper";

import Download from "../assets/Icons/Download.svg";
import Account from "../assets/Icons/Account.svg";
import { useState } from "react";

export default function AccountSetup() {
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));

  const [name, setName] = useState<string>("");
  const [email, setEmail] = useState<string>("");
  const [surname, setSurname] = useState<string>("");
  const [telephone, setTelephone] = useState<string>("");
  const [otchestvo, setOtchestvo] = useState<string>("");
  const [password, setPassword] = useState<string>("");
  const [сompanyName, setCompanyName] = useState<string>("");

  const [avatar, setAvatar] = useState<any>();

  const imgHC = (imgInp: any) => {
    if (imgInp.target.files !== null) {
      const file = imgInp.target.files[0];
      setAvatar(URL.createObjectURL(file));
      handleClose();
    }
  };

  return (
    <SectionWrapper
      maxWidth="lg"
      sx={{
        mt: "25px",
        mb: "70px",
      }}
    >
      <Typography
        component="div"
        sx={{ fontWeight: "400px", fontSize: "12px", lineHeight: "14px", marginBottom: "19px" }}
      >
        Настройки аккаунта
      </Typography>

      <Box
        sx={{
          mt: "20px",
          mb: "40px",
          display: "flex",
          gap: "10px",
        }}
      >
        <Typography variant="h4">Настройки аккаунта</Typography>
      </Box>

      <Box
        sx={{
          width: "100%",
          backgroundColor: "white",
          display: "flex",
          flexDirection: upMd ? "row" : "column",
          borderRadius: "12px",
          mb: "40px",
          boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
                                0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
                                0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 
                                0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
                                0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
                                0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
        }}
      >
        <Box sx={{ display: "flex", justifyContent: "left", ml: "20px", mt: "20px", mr: "58px" }}>
          <Typography component="div">
            <Box component="image" sx={{ display: "flex", width: "220px", height: "220px", borderRadius: "8px" }}>
              <img src={avatar ? avatar : Account} alt="Account" />
            </Box>
            <Button
              variant="outlined"
              component="label"
              sx={{
                width: "220px",
                paddingTop: "10px",
                paddingBottom: "10px",
                borderRadius: "8px",
                boxShadow: "none",

                color: theme.palette.brightPurple.main,
                borderColor: theme.palette.brightPurple.main,
                mt: "30px",
              }}
            >
              Загрузить фото
              <input type="file" hidden onChange={(event) => imgHC(event)} />
            </Button>
          </Typography>
        </Box>
        <Box
          sx={{
            display: "flex",
            flexWrap: "wrap",
            mt: "10px",
            mb: "10px",
            mr: "20px",
          }}
        >
          <Box
            component="div"
            sx={{
              display: "flex",
              justifyContent: "space-between",
              flexWrap: "wrap",
              columnGap: "30px",
              ml: "20px",
              mt: "20px",
            }}
          >
            <InputTextfield
              TextfieldProps={{
                placeholder: "Имя",
              }}
              onChange={(event) => setName(event.target.value)}
              id="text"
              label="Имя"
              gap={upMd ? "15px" : "10px"}
              color={name ? "#e8badd" : ""}
              FormInputSx={{ width: upMd ? "45%" : "100%", mt: "19px", maxWidth: "406px" }}
            />

            <InputTextfield
              TextfieldProps={{
                placeholder: "username@penahaub.com",

                type: "text",
              }}
              onChange={(event) => setEmail(event.target.value)}
              id="email"
              label="E-mail"
              gap={upMd ? "15px" : "10px"}
              FormInputSx={{ width: upMd ? "45%" : "100%", mt: "19px", maxWidth: "406px" }}
              color={email ? "#e8badd" : ""}
            />

            <InputTextfield
              TextfieldProps={{
                placeholder: "Фамилия",

                type: "text",
              }}
              onChange={(event) => setSurname(event.target.value)}
              id="password"
              label="Фамилия"
              gap={upMd ? "15px" : "10px"}
              FormInputSx={{ width: upMd ? "45%" : "100%", mt: "19px", maxWidth: "406px" }}
              color={surname ? "#e8badd" : ""}
            />

            <InputTextfield
              TextfieldProps={{
                placeholder: "+7 900 000 00 00",
                type: "text",
              }}
              onChange={(enent) => setTelephone(enent.target.value)}
              id="password"
              label="Телефон"
              gap={upMd ? "15px" : "10px"}
              FormInputSx={{ width: upMd ? "45%" : "100%", mt: "19px", maxWidth: "406px" }}
              color={telephone ? "#e8badd" : ""}
            />

            <InputTextfield
              TextfieldProps={{
                placeholder: "Отчество",

                type: "text",
              }}
              onChange={(enent) => setOtchestvo(enent.target.value)}
              id="password"
              label="Отчество"
              gap={upMd ? "15px" : "10px"}
              FormInputSx={{ width: upMd ? "45%" : "100%", mt: "19px", maxWidth: "406px" }}
              color={otchestvo ? "#e8badd" : ""}
            />

            <InputTextfield
              TextfieldProps={{
                placeholder: "Не мение 8 символов",
                type: "password",
              }}
              onChange={(enent) => setPassword(enent.target.value)}
              id="email"
              label="Пароль"
              gap={upMd ? "15px" : "10px"}
              FormInputSx={{ width: upMd ? "45%" : "100%", mt: "19px", maxWidth: "406px" }}
              color={password ? "#e8badd" : ""}
            />

            <InputTextfield
              TextfieldProps={{
                placeholder: "ООО Фирма",
                type: "text",
              }}
              onChange={(enent) => setCompanyName(enent.target.value)}
              id="text"
              label="Название компании"
              gap={upMd ? "15px" : "10px"}
              FormInputSx={{ width: upMd ? "45%" : "100%", mt: "19px", maxWidth: "406px" }}
              color={сompanyName ? " #e8badd" : ""}
            />

            <Box
              sx={{
                margin: 0,
                width: upMd ? "45%" : "100%",
                padding: 0,
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                maxWidth: "406px",
              }}
            >
              <Typography sx={{ display: "flex", fontSize: upMd ? "16px" : "18px" }}>
                <img src={Download} alt="Download" />
                <Link
                  href="#"
                  sx={{
                    color: theme.palette.brightPurple.main,
                    marginLeft: "11px",
                  }}
                >
                  Загрузить документы для юр лиц
                </Link>
              </Typography>

              <Typography sx={{ display: "flex", fontSize: upMd ? "16px" : "18px" }}>
                <img src={Download} alt="Download" />
                <Link
                  href="#"
                  sx={{
                    color: theme.palette.brightPurple.main,
                    marginLeft: "11px",
                    marginTop: "5px",
                  }}
                >
                  Загрузить документы для НКО
                </Link>
              </Typography>
            </Box>
            <Typography component="div" sx={{ width: "100%", display: "flex", justifyContent: "right" }}>
              <CustomButton
                variant="contained"
                sx={{
                  width: "180px",
                  height: "44px",
                  backgroundColor: theme.palette.brightPurple.main,
                  textColor: "white",
                  mb: "20px",
                }}
              >
                Cохранить
              </CustomButton>
            </Typography>
          </Box>
        </Box>
      </Box>
    </SectionWrapper>
  );
}
function handleClose() {
  throw new Error("Function not implemented.");
}