logic for site tree

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>
+    )
+}