logic for site tree

2023-05-30 18:14:12 -05:00
parent e19c239e46
commit dc094d7a32
3 changed files with 37 additions and 1 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,7 @@
 'use client'

 import Navbar from '@/components/Navbar'
+import SiteTree from '@/components/SiteTree'
 import { MDXProvider } from '@mdx-js/react'
 import { Inter } from 'next/font/google'
 import './globals.css'
@@ -23,6 +24,7 @@ export default function RootLayout({
        <body className={inter.className}>
          <>
          <Navbar />
+          <SiteTree />
          {children}
          </>
        </body>
--- a/components/SiteTree.tsx
+++ b/components/SiteTree.tsx
@@ -0,0 +1,30 @@
+'use client'
+import { usePathname } from 'next/navigation'
+import Link from 'next/link'
+import { v4 } from 'uuid'
+
+export default function SiteTree() {
+    const pathname = usePathname()
+    const pathAsArray = pathname.split('/').filter(x => x !== '');
+
+    return (
+        <div className="flex flex-nowrap">
+            <Link href="/">
+                <p className="mx-4">home</p>
+            </Link>
+
+            {pathAsArray.map((segment: string, idx: number) => {
+                const path = pathAsArray.slice(0, idx + 1).join('/')
+
+                return (
+                    <>
+                    <p className="mr-4">/</p>
+                    <Link href={path} key={v4()}>
+                        <p className="mr-4">{segment}</p>
+                    </Link>
+                    </>
+                )
+            })}
+        </div>
+    )
+}
--- a/package.json
+++ b/package.json
@@ -24,6 +24,10 @@
    "react-dom": "18.2.0",
    "remark-prism": "^1.3.6",
    "tailwindcss": "3.3.2",
-    "typescript": "5.0.4"
+    "typescript": "5.0.4",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "@types/uuid": "^9.0.1"
  }
 }