Add Volcano tabs along with functioning boilerplate component views

2025-09-03 17:22:24 -07:00
parent ff783f59a2
commit 3a4565e120
12 changed files with 261 additions and 71 deletions
@@ -0,0 +1,28 @@
+import { Flex, Tabs } from '@chakra-ui/react'
+
+// This component needs to be nested inside of a Tabs.Root to work properly
+export function CanvasHeaderTabs({ view, onChangeView, tabs }) {
+    return (
+            <Flex 
+            as="header"
+            position="sticky"
+            top="0"
+            zIndex="dropdown" // zIndex: 1100
+            bg="base200"
+            px={5}
+            pt={3}
+            pb={2}
+            align="center"
+            justify="space-between"
+            width="100%"
+            >
+            <Tabs.List>
+                {tabs.map(({ value, label }) =>
+                    <Tabs.Trigger key={value} value={value} fontSize="lg">
+                        { label }
+                    </Tabs.Trigger>
+                )}
+            </Tabs.List>
+        </Flex>
+    )
+}