From 7574f13a51f8b3d5250b56699ef8d9ef84f1d853 Mon Sep 17 00:00:00 2001 From: Pete Gadomski Date: Tue, 19 Nov 2024 08:24:12 -0700 Subject: [PATCH] Header (#35) * feat: add navbar * feat: breadcumbs --- app/components/breadcrumb.tsx | 40 +++++++++++++++++++++ app/components/color-mode-toggle.tsx | 8 ++++- app/header.tsx | 14 -------- app/layout.tsx | 4 +-- app/navbar.tsx | 54 ++++++++++++++++++++++++++++ app/provider.tsx | 7 +--- 6 files changed, 104 insertions(+), 23 deletions(-) create mode 100644 app/components/breadcrumb.tsx delete mode 100644 app/header.tsx create mode 100644 app/navbar.tsx diff --git a/app/components/breadcrumb.tsx b/app/components/breadcrumb.tsx new file mode 100644 index 0000000..d396032 --- /dev/null +++ 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 ( + + + {validChildren.map((child, index) => { + const last = index === validChildren.length - 1; + return ( + + {child} + {!last && ( + {separator} + )} + + ); + })} + + + ); +}); + +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 index f391b29..c3e6af5 100644 --- 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 ( - + {theme === "light" ? : } ); diff --git a/app/header.tsx b/app/header.tsx deleted file mode 100644 index 9c7c8df..0000000 --- a/app/header.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { Box, ClientOnly, Skeleton } from "@chakra-ui/react"; -import { ColorModeToggle } from "./components/color-mode-toggle"; - -export default function Header() { - return ( -
- - }> - - - -
- ); -} diff --git a/app/layout.tsx b/app/layout.tsx index 0e8da7f..953f014 100644 --- 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({ -
+
{children}
 diff --git a/app/navbar.tsx b/app/navbar.tsx new file mode 100644 index 0000000..11f6f95 --- /dev/null +++ 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 heystac; + } else if (parts.length == 3 && parts[1] == "catalogs") { + return [ + + heystac + , + {parts[2]}, + ]; + } else { + return heystac; + } +} + +export default function Navbar() { + const breadcrumbs = getBreadcrumbs(); + return ( + + + + {breadcrumbs} + + + }> + + + + + + ); +} diff --git a/app/provider.tsx b/app/provider.tsx index fb15911..8880306 100644 --- 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 ( - - {props.children} - + {props.children} );