mirror of
https://github.com/tomru/pfadi-bussle.git
synced 2026-03-03 14:37:13 +01:00
49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import React, { useContext } from 'react'
|
|
import Head from 'next/head'
|
|
import Link from 'next/link'
|
|
import UserContext from './user/context'
|
|
import Logo from './logo'
|
|
|
|
export default function Header({ label }: { label?: string }) {
|
|
const { username, role } = useContext(UserContext)
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>Pfadi-Bussle {label}</title>
|
|
<link rel="icon" href="/favicon.ico" />
|
|
</Head>
|
|
|
|
<div className="my-3">
|
|
<div className="flex flex-row items-center p-3 text-white bg-blue-800 rounded-t-sm">
|
|
<h1 className="mr-3 flex-grow text-2xl">
|
|
<Link href="/">
|
|
<a className="font-extrabold">Pfadi-Bussle</a>
|
|
</Link>
|
|
</h1>
|
|
<Logo className="w-40 flex-shrink-0" />
|
|
</div>
|
|
{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>
|
|
</>
|
|
)
|
|
}
|