chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update made minor adjustments to header.

Browse Source
This commit is contained in:
chight
2026-06-05 13:06:12 -07:00
parent 436464dad9
commit 6a0fe7b05b
1 changed files with 32 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Header/Header.jsx
+32 -28
View File
@@ -1,36 +1,40 @@
import { useRecipe, Button, Stack, Text, Flex } from "@chakra-ui/react" import { useRecipe, Button, Stack, Text, Flex } from "@chakra-ui/react"
import UserAvatarMenu from "./UserAvatarMenu.jsx"; import UserAvatarMenu from "./UserAvatarMenu.jsx";
import { useNavigate } from "react-router-dom";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
//TODO: Dynamically populate per each user // Import the asset properly so Vite can bundle it for any server
const user = { // import defaultAvatar from "@/assets/user_profile.svg";
name: "venessa kuchenik",
email: "vkuchenik@contractor.usgs.gov", // TODO: Pull this dynamically from an Auth Context later!
// avatar: "src\\assets\\user_profile.svg" const placeholderUser = {
name: "Princess Zelda",
email: "zelda.royal@hyrule.gov",
// avatar: defaultAvatar
} }
export default function Header() { // Accept a 'user' prop now, fallback to placeholder if empty
const navigate = useNavigate(); export default function Header({ user = placeholderUser }) {
const recipe = useRecipe({ key: "header" }); const recipe = useRecipe({ key: "header" });
const styles = recipe(); const styles = recipe();
return ( return (
<Flex css={styles}> <Flex css={styles} justify="space-between" align="center" width="100%">
<Button as={NavLink} to={"/home"} color="color" variant="plain" textStyle="5xl" fontWeight="bold"> {/* Home Link Logo */}
VDAP <Button as={NavLink} to="/home" color="color" variant="plain" textStyle="5xl" fontWeight="bold">
</Button> VDAP
<Flex align="center" gap={3} pr={6}> </Button>
<Stack gap="0" textAlign="center" cursor="default">
<Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text> {/* User Profile Section */}
<Text color="fg.muted" textStyle="sm">{user.email}</Text> <Flex align="center" gap={3} pr={6}>
</Stack> <Stack gap="0" textAlign="right" cursor="default">
<UserAvatarMenu <Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text>
name={user.name} <Text color="fg.muted" textStyle="sm">{user.email}</Text>
avatar={user.avatar} </Stack>
/> <UserAvatarMenu
</Flex> name={user.name}
</Flex> avatar={user.avatar}
); />
</Flex>
</Flex>
);
} }