innocuous-symmetry/mikayla-dobson-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

logic for site tree

Browse Source
This commit is contained in:
Mikayla Dobson
2023-05-30 18:14:12 -05:00
parent e19c239e46
commit dc094d7a32
3 changed files with 37 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/layout.tsx
View File

@@ -1,6 +1,7 @@
'use client' 'use client'
import Navbar from '@/components/Navbar' import Navbar from '@/components/Navbar'
import SiteTree from '@/components/SiteTree'
import { MDXProvider } from '@mdx-js/react' import { MDXProvider } from '@mdx-js/react'
import { Inter } from 'next/font/google' import { Inter } from 'next/font/google'
import './globals.css' import './globals.css'
@@ -23,6 +24,7 @@ export default function RootLayout({
<body className={inter.className}> <body className={inter.className}>
<> <>
<Navbar /> <Navbar />
<SiteTree />
{children} {children}
</> </>
</body> </body>

30
components/SiteTree.tsx
View File

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

6
package.json
View File

@@ -24,6 +24,10 @@
"react-dom": "18.2.0", "react-dom": "18.2.0",
"remark-prism": "^1.3.6", "remark-prism": "^1.3.6",
"tailwindcss": "3.3.2", "tailwindcss": "3.3.2",
"typescript": "5.0.4" "typescript": "5.0.4",
"uuid": "^9.0.0"
},
"devDependencies": {
"@types/uuid": "^9.0.1"
} }
} }