28 lines
871 B
React
28 lines
871 B
React
|
|
import { chakra, useRecipe, Box, Button, Avatar, HStack, Stack, Text } 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>
|
|
<Button variant="plain">
|
|
<Stack gap="0">
|
|
<Text color="color" 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>
|
|
</Button>
|
|
</chakra.div>
|
|
);
|
|
}
|
|
|
|
const user = {
|
|
name: "venessa kuchenik",
|
|
email: "vkuchenik@contractor.usgs.gov",
|
|
// avatar: "src\\assets\\user_profile.svg"
|
|
} |