Initial support for breadcrumbs

feat: add breadcrumbs to UI for easy navigation

TODO.md → NOTES.md

@@ -1,4 +1,12 @@
-<!-- TODO: add seo -->
+## To Do
+
+- TODO: add seo
+
+## Checkpoints for new tool
+
+- [ ] Logic
+- [ ] Breadcumbs
+
 <!-- wasm notes -->
 
 ```

app/tools/layout.tsx

@@ -1,3 +1,33 @@
+"use client";
+import {getToolByHref} from "@/config/tools";
+import BuildCircleRoundedIcon from "@mui/icons-material/BuildCircleRounded";
+import GridViewRoundedIcon from "@mui/icons-material/GridViewRounded";
+import HomeRoundedIcon from "@mui/icons-material/HomeRounded";
+import {BreadcrumbItem, Breadcrumbs} from "@nextui-org/react";
+import {usePathname, useRouter} from "next/navigation";
 export default function ToolLayout({children}: {children: React.ReactNode}) {
-  return <main className="h-screen overflow-auto px-2">{children} </main>;
+  const path = usePathname();
+  const tool = getToolByHref(path);
+  const router = useRouter();
+
+  return (
+    <main className="h-screen overflow-auto px-2">
+      <Breadcrumbs className="flex justify-center mt-4">
+        <BreadcrumbItem
+          onPress={() => router.push("/")}
+          startContent={<HomeRoundedIcon fontSize="small" />}
+        >
+          Home
+        </BreadcrumbItem>
+        {/* TODO: route to tools page */}
+        <BreadcrumbItem startContent={<GridViewRoundedIcon fontSize="small" />}>
+          Tools
+        </BreadcrumbItem>
+        <BreadcrumbItem startContent={<BuildCircleRoundedIcon fontSize="small" />}>
+          {tool?.title}
+        </BreadcrumbItem>
+      </Breadcrumbs>
+      {children}
+    </main>
+  );
 }

components/primitives.ts

@@ -19,7 +19,7 @@ export const title = tv({
     size: {
       xs: "text-1xl lg:text-1xl",
       sm: "text-2xl lg:text-4xl",
-      md: "text-[2.1rem] lg:text-5xl",
+      md: "text-[2.1rem] lg:text-5xl lg:leading-tight ",
       lg: "text-3xl lg:text-6xl",
     },
     fullWidth: {