create profile page

src/pages/Profile/index.tsx

-import { VStack } from "@chakra-ui/react";
-import React from "react";
+import {
+  Box,
+  Input,
+  Select,
+  Stack,
+  Text,
+  useToast,
+  VStack,
+  Image,
+} from "@chakra-ui/react";
+import React, { useEffect, useState } from "react";
+import { ImageListType } from "react-images-uploading";
 import { useHistory } from "react-router-dom";
 
 import BottomMenu from "../../components/BottomMenu";
 import Button from "../../components/Button";
-import { showSweetAlertConfirm } from "../../utils/utils";
+import InputFile from "../../components/InputFile";
+import { User, UserRegister } from "../../model/userModel";
+import { createUser } from "../../services/userService";
+import {
+  showSweetAlertConfirm,
+  getLoggedUserFromLocalStorage,
+} from "../../utils/utils";
 
 const Home = (): React.ReactElement => {
   const history = useHistory();
+  const [loggedUser, setLoggedUser] = useState<User>();
+
+  useEffect(() => {
+    (async () => {
+      const response = getLoggedUserFromLocalStorage();
+      setLoggedUser(response);
+    })();
+  }, []);
 
   const logout = () => {
     localStorage.clear();
@@ -24,9 +48,107 @@ const Home = (): React.ReactElement => {
   };
 
   return (
-    <>
-      <VStack>
-        <span>Perfil do usuário.</span>
+    <Box
+      d="flex"
+      flexDirection="column"
+      alignItems="center"
+      justifyContent="space-evenly"
+      h="100vh"
+      overflowY="auto"
+    >
+      <Stack display="flex" alignItems="center" flexDirection="column">
+        <Text fontWeight="extrabold" color="yellow.500">
+          PERFIL DO USUÁRIO
+        </Text>
+        <Box
+          w="226px"
+          h="226px"
+          borderRadius="50%"
+          overflow="hidden"
+          border="12px solid"
+          borderColor="blue.200"
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          maxW="720px"
+          mx="auto"
+        >
+          <Image src={loggedUser?.image} w="226px" h="226px" />
+        </Box>
+      </Stack>
+
+      <Stack
+        spacing="16px"
+        justifyContent="center"
+        alignItems="center"
+        w={["80%", "40%", "30%"]}
+      >
+        <Box w="100%" display="flex" flexDirection="column">
+          <Text fontWeight="extrabold" color="blue.200">
+            Nome
+          </Text>
+          <Input
+            w="100%"
+            as="text"
+            border="1px solid"
+            borderRadius="8px"
+            p="8px 0 8px 15px"
+            borderColor="blue.200"
+            _hover={{ borderColor: "blue.200" }}
+          >
+            {loggedUser?.name}
+          </Input>
+        </Box>
+
+        <Box w="100%" display="flex" flexDirection="column">
+          <Text fontWeight="extrabold" color="blue.200">
+            Documento
+          </Text>
+          <Input
+            w="100%"
+            as="text"
+            border="1px solid"
+            borderRadius="8px"
+            p="8px 0 8px 15px"
+            borderColor="blue.200"
+            _hover={{ borderColor: "blue.200" }}
+          >
+            {loggedUser?.document}
+          </Input>
+        </Box>
+        <Box w="100%" display="flex" flexDirection="column">
+          <Text fontWeight="extrabold" color="blue.200">
+            Telefone
+          </Text>
+          <Input
+            w="100%"
+            as="text"
+            border="1px solid"
+            borderRadius="8px"
+            p="8px 0 8px 15px"
+            borderColor="blue.200"
+            _hover={{ borderColor: "blue.200" }}
+          >
+            {loggedUser?.phone}
+          </Input>
+        </Box>
+        <Box w="100%" display="flex" flexDirection="column">
+          <Text fontWeight="extrabold" color="blue.200">
+            E-mail
+          </Text>
+          <Input
+            w="100%"
+            as="text"
+            border="1px solid"
+            borderRadius="8px"
+            p="8px 0 8px 15px"
+            borderColor="blue.200"
+            _hover={{ borderColor: "blue.200" }}
+          >
+            {loggedUser?.email}
+          </Input>
+        </Box>
+
         <Button
           theme="secondary"
           w="60%"
@@ -36,9 +158,9 @@ const Home = (): React.ReactElement => {
         >
           Sair
         </Button>
-      </VStack>
+      </Stack>
       <BottomMenu defaultIndex={3} />
-    </>
+    </Box>
   );
 };