tomru/pfadi-bussle
1
0
Fork 0
mirror of https://github.com/tomru/pfadi-bussle.git synced 2026-03-03 06:27:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

inspect path by breadcrumbs

Browse Source
This commit is contained in:
Thomas Ruoff
2020-12-25 00:50:12 +01:00
parent 29347b9019
commit bb5f94491f
12 changed files with 30 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
components/breadcrumbs.tsx
View File

@@ -1,14 +1,20 @@
import { useContext } from 'react'
import { useRouter } from 'next/router'
import Link from 'next/link'
import UserContext from './user/context'
export default function Breadcrumbs({ label }: { label: string }) {
export default function Breadcrumbs() {
const { username, role } = useContext(UserContext)
const router = useRouter()
if (!label) {
const breadcrumbs = router.asPath.replace(/^\//, '').split('/')
if (!breadcrumbs.length) {
return null
}
// TODO: translate routes
// TODO: make entries linkable
return (
<div className="flex flex-row items-center px-3 py-1 text-white text-base bg-blue-400 rounded-b-sm">
{role === 'admin' && (
@@ -22,10 +28,16 @@ export default function Breadcrumbs({ label }: { label: string }) {
<a className="font-extrabold">Home</a>
</Link>
</h2>
{'>'}
<h2 className="mx-1 flex-grow">
<span className="font-extrabold">{label}</span>
</h2>
{breadcrumbs.map((breadcrumb) => {
return (
<>
{'>'}
<h2 className="mx-1">
<span className="font-extrabold">{breadcrumb}</span>
</h2>
</>
)
})}
</>
</div>
)

4
components/header.tsx
View File

@@ -3,7 +3,7 @@ import Link from 'next/link'
import Logo from './logo'
import Breadcrumbs from './breadcrumbs'
export default function Header({ label }: { label?: string }) {
export default function Header() {
return (
<>
<Head>
@@ -20,7 +20,7 @@ export default function Header({ label }: { label?: string }) {
</h1>
<Logo className="w-40 flex-shrink-0" />
</div>
<Breadcrumbs label={label} />
<Breadcrumbs />
</div>
</>
)