61 lines
2.5 KiB
TypeScript
61 lines
2.5 KiB
TypeScript
import { Avatar, Box, Field, Input, SimpleGrid, Stack, Text } from "@chakra-ui/react"
|
|
import MainFrame from "../../components/MainFrame"
|
|
import { FaCamera } from "react-icons/fa";
|
|
import { Button } from "../../components/ui/button";
|
|
import Changepassword from "./ChangePassword";
|
|
|
|
const Profile = () => {
|
|
return (
|
|
<MainFrame >
|
|
<Stack p={5}>
|
|
<Box position="relative" width="fit-content"
|
|
display="inline-block"
|
|
|
|
cursor="pointer" onClick={() => alert("Avatar clicked!")}>
|
|
<Avatar.Root size={"2xl"} style={{ display: "inline-block", width: "auto" }}>
|
|
<Avatar.Fallback />
|
|
<Avatar.Image src="https://bit.ly/sage-adebayo" />
|
|
</Avatar.Root>
|
|
|
|
<Box
|
|
position="absolute"
|
|
bottom="-2px"
|
|
left={"39px"}
|
|
p="2px"
|
|
>
|
|
<FaCamera color="black" size={16} />
|
|
</Box>
|
|
</Box>
|
|
<Text color={"black"} fontWeight={"bold"}>{`Jackson Da`.slice(0, 10) + '...'}</Text>
|
|
{/* <Text color={"black"} fontSize={"10px"}>Employee ID: <Text color={"black"} fontSize={"10px"}>#1245679</Text> </Text> */}
|
|
<Text color="black" fontSize="12px">
|
|
Employee ID: <span>#1245679</span>
|
|
</Text>
|
|
<Box w={"70%"} mt={5}>
|
|
<SimpleGrid columns={{ base: 1, md: 2 }} columnGap={9} rowGap={4}>
|
|
<Field.Root>
|
|
<Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
|
|
<Input placeholder="Enter the First Name" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" /></Field.Root>
|
|
<Field.Root>
|
|
<Field.Label color="black" pt={1} fontSize="12px">last Name</Field.Label>
|
|
<Input placeholder="Enter the last Name" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" /></Field.Root>
|
|
<Field.Root>
|
|
<Field.Label color="black" pt={1} fontSize="12px" >Phone Number</Field.Label>
|
|
<Input placeholder="Enter the Phone Number" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" /></Field.Root>
|
|
|
|
</SimpleGrid>
|
|
<Text color={"black"} fontWeight={"bold"} fontSize={"14px"} mt={5}>Update password</Text>
|
|
{/* <Button bg="#02A0A0" color={"#fff"} p={4} fontSize={"12px"} mt={2}>
|
|
Change Password
|
|
</Button> */}
|
|
<Changepassword />
|
|
|
|
</Box>
|
|
|
|
</Stack>
|
|
|
|
</MainFrame >
|
|
)
|
|
}
|
|
|
|
export default Profile |