Refactor made changes to file structures

2026-06-10 14:00:37 -07:00
parent 305ee4e757
commit baaf162df9
46 changed files with 42 additions and 177 deletions
@@ -0,0 +1,40 @@
+import { useRecipe, Button, Stack, Text, Flex } from "@chakra-ui/react"
+import UserAvatarMenu from "./UserAvatarMenu.jsx";
+import { NavLink } from "react-router-dom";
+
+// Import the asset properly so Vite can bundle it for any server
+// import defaultAvatar from "@/assets/user_profile.svg";
+
+// TODO: Pull this dynamically from an Auth Context later!
+const placeholderUser = {
+    name: "Princess Zelda",
+    email: "zelda.royal@hyrule.gov",
+    // avatar: defaultAvatar
+}
+
+// Accept a 'user' prop now, fallback to placeholder if empty
+export default function Header({ user = placeholderUser }) {
+    const recipe = useRecipe({ key: "header" });
+    const styles = recipe();
+
+    return (
+        <Flex css={styles} justify="space-between" align="center" width="100%">
+            {/* Home Link Logo */}
+            <Button as={NavLink} to="/home" color="color" variant="plain" textStyle="5xl" fontWeight="bold">
+                VDAP
+            </Button>
+
+            {/* User Profile Section */}
+            <Flex align="center" gap={3} pr={6}>
+                <Stack gap="0" textAlign="right" cursor="default">
+                    <Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text>
+                    <Text color="fg.muted" textStyle="sm">{user.email}</Text>
+                </Stack>
+                <UserAvatarMenu
+                    name={user.name}
+                    avatar={user.avatar}
+                />
+            </Flex>
+        </Flex>
+    );
+}