chore: add breadcrumbs

Author: mjkeaton

src/components/Breadcrumbs.tsx

@@ -0,0 +1,21 @@
+import { PropsWithChildren } from "react";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
+import { Link } from "react-router";
+
+export function Breadcrumbs({ children }: PropsWithChildren<unknown>) {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <Link to="/">Home</Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>{children}</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}

src/components/H2.tsx

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from "react";
+
+export function H2({ children }: PropsWithChildren<unknown>) {
+  return (
+    <h2 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+      {children}
+    </h2>
+  )
+}

src/components/PageTitle.tsx

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from "react";
+import { H2 } from "./H2";
+
+export function PageTitle({ children }: PropsWithChildren<unknown>) {
+  return (
+    <H2>
+      {children}
+    </H2>
+  )
+}

src/components/ui/breadcrumb.tsx

@@ -0,0 +1,109 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

src/pages/balances/BalancesPage.tsx

@@ -1,7 +1,11 @@
+import { Breadcrumbs } from "@/components/Breadcrumbs";
+import { PageTitle } from "@/components/PageTitle";
+
 export default function BalancesPage() {
   return (
     <>
-      <h2>Balances</h2>
+      <Breadcrumbs>Balances</Breadcrumbs>
+      <PageTitle>Balances</PageTitle>
     </>
   )
 }

src/pages/home/HomePage.tsx

@@ -1,7 +1,9 @@
+import { PageTitle } from "@/components/PageTitle";
+
 export default function HomePage() {
   return (
     <>
-      <h2>Home</h2>
+      <PageTitle>Home</PageTitle>
     </>
   )
 }

src/pages/quotes/QuotesPage.tsx

@@ -1,7 +1,11 @@
+import { Breadcrumbs } from "@/components/Breadcrumbs";
+import { PageTitle } from "@/components/PageTitle";
+
 export default function QuotesPage() {
   return (
     <>
-      <h2>Quotes</h2>
+      <Breadcrumbs>Quotes</Breadcrumbs>
+      <PageTitle>Quotes</PageTitle>
     </>
   )
 }

src/pages/settings/SettingsPage.tsx

@@ -1,7 +1,11 @@
+import { Breadcrumbs } from "@/components/Breadcrumbs";
+import { PageTitle } from "@/components/PageTitle";
+
 export default function SettingsPage() {
   return (
     <>
-      <h2>Settings</h2>
+      <Breadcrumbs>Settings</Breadcrumbs>
+      <PageTitle>Settings</PageTitle>
     </>
   )
 }