41 lines
1.3 KiB
React
41 lines
1.3 KiB
React
|
import { chakra, useRecipe, Box, Button, Avatar, Stack, Text, Menu, Portal } from "@chakra-ui/react"
|
||
|
|
|
||
|
|
export default function Header() {
|
||
|
|
const recipe = useRecipe({ key: "header" });
|
||
|
|
const styles = recipe();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<chakra.div css={styles}>
|
||
|
|
<Button color="color" variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button>
|
||
|
|
<Stack gap="0">
|
||
|
|
<Text color="color" 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 */}
|
||
|
|
</chakra.div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const user = {
|
||
|
|
name: "venessa kuchenik",
|
||
|
|
email: "vkuchenik@contractor.usgs.gov",
|
||
|
|
// avatar: "src\\assets\\user_profile.svg"
|
||
|
|
}
|