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

extract breadcrumbs

Browse Source
This commit is contained in:
Thomas Ruoff
2020-12-25 00:31:43 +01:00
parent b43e9be604
commit 29347b9019
2 changed files with 35 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
components/breadcrumbs.tsx Normal file
View File

@@ -0,0 +1,32 @@
import { useContext } from 'react'
import Link from 'next/link'
import UserContext from './user/context'
export default function Breadcrumbs({ label }: { label: string }) {
const { username, role } = useContext(UserContext)
if (!label) {
return null
}
return (
<div className="flex flex-row items-center px-3 py-1 text-white text-base bg-blue-400 rounded-b-sm">
{role === 'admin' && (
<div className="font-extrabold bg-red-400 px-2 py-1 mr-3 rounded-sm">
{username}
</div>
)}
<>
<h2 className="mr-1">
<Link href="/">
<a className="font-extrabold">Home</a>
</Link>
</h2>
{'>'}
<h2 className="mx-1 flex-grow">
<span className="font-extrabold">{label}</span>
</h2>
</>
</div>
)
}

27
components/header.tsx
View File

@@ -1,15 +1,13 @@
import React, { useContext } from 'react'
import Head from 'next/head' import Head from 'next/head'
import Link from 'next/link' import Link from 'next/link'
import UserContext from './user/context'
import Logo from './logo' import Logo from './logo'
import Breadcrumbs from './breadcrumbs'
export default function Header({ label }: { label?: string }) { export default function Header({ label }: { label?: string }) {
const { username, role } = useContext(UserContext)
return ( return (
<> <>
<Head> <Head>
<title>Pfadi-Bussle {label}</title> <title>Pfadi-Bussle</title>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
@@ -22,26 +20,7 @@ export default function Header({ label }: { label?: string }) {
</h1> </h1>
<Logo className="w-40 flex-shrink-0" /> <Logo className="w-40 flex-shrink-0" />
</div> </div>
{label && ( <Breadcrumbs label={label} />
<div className="flex flex-row items-center px-3 py-1 text-white text-base bg-blue-400 rounded-b-sm">
{username === 'admin' && (
<div className="font-extrabold bg-red-400 px-2 py-1 mr-3 rounded-sm">
Admin
</div>
)}
<>
<h2 className="mr-1">
<Link href="/">
<a className="font-extrabold">Home</a>
</Link>
</h2>
{'>'}
<h2 className="mx-1 flex-grow">
<span className="font-extrabold">{label}</span>
</h2>
</>
</div>
)}
</div> </div>
</> </>
) )