projeto-hit/frontend/src/components/UserModal/UserModal.jsx

import React from "react";
import { color } from "../../style/varibles";
import { ModalOverlayStyled, UserModalStyled, UserBtns } from "./UserModal.style";

import api from "../../services/api";
import { AuthContext } from "../../context/Auth/AuthContext";
import { Can } from "../Can";

import BtnComponent from "../Base/BTN/Btn";
import FormComponent from "../Base/Form/FormComponent";
import InputComponent from "../Base/Form/Input/InputComponent";
import UserModalComponent from "./UserModalImg/UserModalComponent";

import UserImg from "../../assets/images/User/user.jpg";

const UserModal = ({ modal, click }) => {
  const { user } = React.useContext(AuthContext);

  const initalData = {
    name: user.name,
    email: user.email,
    perfil:user.profile,
  }
  console.log(user);

  return (
    <ModalOverlayStyled modal={modal}>
      <UserModalStyled>
        <UserModalComponent img={UserImg} desc="Clique na imagem para alterar" />
        <FormComponent method="get">
          <InputComponent id="nome" label="Nome" type="text"  value={initalData.name}/>
          <InputComponent id="email" label="E-mail" type="email"  value={initalData.email}/>
          <InputComponent id="password" label="Senha" type="password" />
          <UserBtns>
            <BtnComponent text="Cancelar" onClick={click} />
            <BtnComponent
              text="Salvar"
              bgcolor={color.status.yes}
              fontcolor={color.pricinpal.blanco}
            />
          </UserBtns>
        </FormComponent>
      </UserModalStyled>
    </ModalOverlayStyled>
  );
};

export default UserModal;

/*{name: 'teste', id: 2, email: 'teste@teste.com', profile: 'master', tokenVersion: 0, …}
email: "teste@teste.com"
id: 2
name: "teste"
profile: "master"
queues: []
tokenVersion: 0 */