52 lines
1.7 KiB
React
52 lines
1.7 KiB
React
|
|
import { Box, Button, Avatar, HStack, Stack, Text, Menu, Portal } 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}
|
|
bg="#EDF1F1"
|
|
>
|
|
<Button color="#19332D" variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button>
|
|
<Button variant="plain">
|
|
<HStack key={user.email} gap="4">
|
|
<Stack gap="0">
|
|
<Text color="#19332D" fontWeight="bold" textStyle="lg">{user.name}</Text>
|
|
<Text color="fg.muted" textStyle="sm">{user.email}</Text>
|
|
</Stack>
|
|
{/* Add a drop down menu to the avatar */}
|
|
<Menu.Root>
|
|
<Menu.Trigger rounded="full" focusRing="outside">
|
|
<Avatar.Root>
|
|
<Avatar.Fallback name={user.name} />
|
|
<Avatar.Image src={user.avatar} />
|
|
</Avatar.Root>
|
|
</Menu.Trigger>
|
|
<Portal>
|
|
<Menu.Positioner zIndex="popover">
|
|
<Menu.Content>
|
|
<Menu.Item value="account">Account</Menu.Item>
|
|
<Menu.Item value="settings">Settings</Menu.Item>
|
|
<Menu.Item value="logout">Logout</Menu.Item>
|
|
</Menu.Content>
|
|
</Menu.Positioner>
|
|
</Portal>
|
|
</Menu.Root>
|
|
{/* End drop down menu */}
|
|
</HStack>
|
|
</Button>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
const user = {
|
|
name: "venessa kuchenik",
|
|
email: "vkuchenik@contractor.usgs.gov",
|
|
// avatar: "src\\assets\\user_profile.svg"
|
|
} |