Add CanvasHeader along with sub components CanvasHeaderNav, SearchBar, SettingsButton

2025-07-11 15:58:38 -07:00
parent 12090cb391
commit eab46d424e
8 changed files with 116 additions and 24 deletions
@@ -0,0 +1,30 @@
+import { Flex, HStack } from "@chakra-ui/react";
+import { CanvasHeaderNav } from "./CanvasHeaderNav";
+import { SearchBar } from "./SearchBar";
+import { SettingsButton } from "./SettingsButton";
+
+export default function CanvasHeader() {
+    return (
+        <>
+            <Flex
+                as="header"
+                position="sticky"
+                top="0"
+                zIndex="banner"
+                bg="white"
+                borderBottom="1px solid"
+                borderColor="gray.200"
+                px={6}
+                py={3}
+                align="center"
+                justify="space-between"
+            >
+                <CanvasHeaderNav />
+                <HStack spacing={3}>
+                    <SearchBar />
+                    <SettingsButton />
+                </HStack>
+            </Flex>
+        </>
+    );
+}