Header (#35)

* feat: add navbar * feat: breadcumbs
gadomski · Nov 19, 2024 · 7574f13 · 7574f13
1 parent a84cba3
commit 7574f13
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 23 deletions.
diff --git a/app/components/breadcrumb.tsx b/app/components/breadcrumb.tsx
@@ -0,0 +1,40 @@
+import { Breadcrumb, type SystemStyleObject } from "@chakra-ui/react";
+import * as React from "react";
+
+export interface BreadcrumbRootProps extends Breadcrumb.RootProps {
+  separator?: React.ReactNode;
+  separatorGap?: SystemStyleObject["gap"];
+}
+
+export const BreadcrumbRoot = React.forwardRef<
+  HTMLDivElement,
+  BreadcrumbRootProps
+>(function BreadcrumbRoot(props, ref) {
+  const { separator, separatorGap, children, ...rest } = props;
+
+  const validChildren = React.Children.toArray(children).filter(
+    React.isValidElement
+  );
+
+  return (
+    <Breadcrumb.Root ref={ref} {...rest}>
+      <Breadcrumb.List gap={separatorGap}>
+        {validChildren.map((child, index) => {
+          const last = index === validChildren.length - 1;
+          return (
+            <React.Fragment key={index}>
+              <Breadcrumb.Item>{child}</Breadcrumb.Item>
+              {!last && (
+                <Breadcrumb.Separator>{separator}</Breadcrumb.Separator>
+              )}
+            </React.Fragment>
+          );
+        })}
+      </Breadcrumb.List>
+    </Breadcrumb.Root>
+  );
+});
+
+export const BreadcrumbLink = Breadcrumb.Link;
+export const BreadcrumbCurrentLink = Breadcrumb.CurrentLink;
+export const BreadcrumbEllipsis = Breadcrumb.Ellipsis;
diff --git a/app/components/color-mode-toggle.tsx b/app/components/color-mode-toggle.tsx
@@ -10,7 +10,13 @@ export function ColorModeToggle() {
     setTheme(theme === "light" ? "dark" : "light");
   };
   return (
-    <IconButton aria-label="toggle color mode" onClick={toggleColorMode}>
+    <IconButton
+      size={"sm"}
+      rounded={"full"}
+      variant={"ghost"}
+      aria-label="toggle color mode"
+      onClick={toggleColorMode}
+    >
       {theme === "light" ? <Moon /> : <Sun />}
     </IconButton>
   );

diff --git a/app/header.tsx b/app/header.tsx
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,6 @@
 import { Metadata } from "next";
 import { Inter } from "next/font/google";
-import Header from "./header";
+import Navbar from "./navbar";
 import Provider from "./provider";
 
 const inter = Inter({
@@ -22,7 +22,7 @@ export default function RootLayout({
       <head></head>
       <body>
         <Provider>
-          <Header></Header>
+          <Navbar></Navbar>
           <main>{children}</main>
         </Provider>
       </body>

diff --git a/app/navbar.tsx b/app/navbar.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { Box, ClientOnly, Flex, Skeleton, Stack } from "@chakra-ui/react";
+import {
+  BreadcrumbCurrentLink,
+  BreadcrumbLink,
+  BreadcrumbRoot,
+} from "@components/breadcrumb";
+import { usePathname } from "next/navigation";
+import { ColorModeToggle } from "./components/color-mode-toggle";
+
+function getBreadcrumbs() {
+  const parts = usePathname().split("/");
+  if (parts.length == 2 && !parts[0] && !parts[1]) {
+    return <BreadcrumbCurrentLink>heystac</BreadcrumbCurrentLink>;
+  } else if (parts.length == 3 && parts[1] == "catalogs") {
+    return [
+      <BreadcrumbLink href="/" key={0}>
+        heystac
+      </BreadcrumbLink>,
+      <BreadcrumbCurrentLink key={1}>{parts[2]}</BreadcrumbCurrentLink>,
+    ];
+  } else {
+    return <BreadcrumbLink href="/">heystac</BreadcrumbLink>;
+  }
+}
+
+export default function Navbar() {
+  const breadcrumbs = getBreadcrumbs();
+  return (
+    <Box>
+      <Flex
+        minH={"60px"}
+        bg={{ base: "white", _dark: "gray.800" }}
+        color={{ base: "gray.600", _dark: "white" }}
+        py={{ base: 2 }}
+        px={{ base: 4 }}
+        borderBottom={1}
+        borderStyle={"solid"}
+        borderColor={{ base: "gray.200", _dark: "gray.900" }}
+        align={"center"}
+      >
+        <Flex flex={1} justify={"start"}>
+          <BreadcrumbRoot separator="/">{breadcrumbs}</BreadcrumbRoot>
+        </Flex>
+        <Stack>
+          <ClientOnly fallback={<Skeleton w="10" h="10" rounded="md" />}>
+            <ColorModeToggle />
+          </ClientOnly>
+        </Stack>
+      </Flex>
+    </Box>
+  );
+}
diff --git a/app/provider.tsx b/app/provider.tsx
@@ -2,17 +2,12 @@
 
 import { ChakraProvider, defaultSystem } from "@chakra-ui/react";
 import { ThemeProvider } from "next-themes";
-import { createContext } from "react";
-
-export const BreadcrumbContext = createContext([]);
 
 export default function RootLayout(props: { children: React.ReactNode }) {
   return (
     <ChakraProvider value={defaultSystem}>
       <ThemeProvider attribute="class" disableTransitionOnChange>
-        <BreadcrumbContext.Provider value={[]}>
-          {props.children}
-        </BreadcrumbContext.Provider>
+        {props.children}
       </ThemeProvider>
     </ChakraProvider>
   );