36 lines
1.1 KiB
React
36 lines
1.1 KiB
React
|
|
||
|
|
import { Box, Button, Avatar, HStack, Stack, Text } from "@chakra-ui/react"
|
||
|
|
|
||
|
|
export default function Header() {
|
||
|
|
return (
|
||
|
|
<Box w="100%" h="100%"
|
||
|
|
borderBottom="1px"
|
||
|
|
borderColor="black"
|
||
|
|
borderStyle="solid"
|
||
|
|
display="flex"
|
||
|
|
flexDirection="row"
|
||
|
|
justifyContent="space-between"
|
||
|
|
alignItems="center" paddingLeft={5} paddingRight={2}
|
||
|
|
>
|
||
|
|
<Button variant="plain" textStyle="4xl" fontWeight="bold">VDAP</Button>
|
||
|
|
<Button variant="plain">
|
||
|
|
<HStack key={user.email} gap="4">
|
||
|
|
<Stack gap="0">
|
||
|
|
<Text fontWeight="bold" textStyle="lg">{user.name}</Text>
|
||
|
|
<Text color="fg.muted" textStyle="sm">{user.email}</Text>
|
||
|
|
</Stack>
|
||
|
|
<Avatar.Root>
|
||
|
|
<Avatar.Fallback name={user.name} />
|
||
|
|
<Avatar.Image src={user.avatar} />
|
||
|
|
</Avatar.Root>
|
||
|
|
</HStack>
|
||
|
|
</Button>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const user = {
|
||
|
|
name: "venessa kuchenik",
|
||
|
|
email: "vkuchenik@contractor.usgs.gov",
|
||
|
|
// avatar: "src\\assets\\user_profile.svg"
|
||
|
|
}
|