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

many visual alignments

Browse Source
This commit is contained in:
Thomas Ruoff
2020-11-26 00:38:34 +01:00
parent 4801525dc4
commit d546e98ab2
11 changed files with 84 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
components/header.tsx
View File

@@ -1,25 +1,40 @@
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 = 'Pfadi Bussle' }: { label?: string }) {
export default function Header({ label }: { label?: string }) {
const { username, role } = useContext(UserContext)
return (
<>
<div className="flex flex-row items-center p-3 my-3 text-white bg-gray-400 rounded-sm">
<h1 className="mr-3 flex-grow text-2xl">
<Link href="/">
<a className="text-indigo-600 font-extrabold">{label}</a>
</Link>
</h1>
<Logo className="w-40 flex-shrink-0 text-white" />
</div>
{username && (
<div className="info-message">
FYI, you are logged in as <strong className="ml-1">{username}</strong>
<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-3 flex-grow">
<span className="font-extrabold">{label}</span>
</h2>
</div>
)}
</div>
</>
)
}