Matthias-Claudius-Schule/borrow-system
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redesgined header

Browse Source
This commit is contained in:
Theis Gaedigk
2025-09-03 14:52:36 +02:00
parent 68f13f369c
commit c0ae12185a
1 changed files with 32 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
frontend/src/components/Header.tsx
View File

@@ -22,9 +22,12 @@ const Header: React.FC<HeaderProps> = ({ onLogout }) => {
}
};
const btn =
"inline-flex items-center h-9 px-3 rounded-md text-sm font-medium border border-slate-300 bg-white text-slate-700 hover:bg-slate-100 active:bg-slate-200 transition focus:outline-none focus:ring-2 focus:ring-slate-400/50";
return (
<header className="mb-4 sm:mb-6">
<div className="flex items-start justify-between gap-3">
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div className="min-w-0">
<h1 className="text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight">
Gegenstand ausleihen
@@ -33,30 +36,38 @@ const Header: React.FC<HeaderProps> = ({ onLogout }) => {
Schnell und unkompliziert Equipment reservieren
</p>
</div>
<button
type="button"
onClick={onLogout}
className="h-9 px-3 rounded-md border border-slate-300 text-slate-700 hover:bg-slate-100 transition"
<nav
aria-label="Aktionen"
className="flex flex-wrap items-center gap-2"
>
Logout
</button>
<a href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system/src/branch/dev/Docs/HELP.md">
<button className="h-9 px-3 rounded-md border border-slate-300 text-slate-700 hover:bg-slate-100 transition">
<a
href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system/src/branch/dev/Docs/HELP.md"
target="_blank"
rel="noreferrer"
className={btn}
>
Hilfe
</button>
</a>
<a href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system">
<button className="h-9 px-3 rounded-md border border-slate-300 text-slate-700 hover:bg-slate-100 transition">
</a>
<a
href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system"
target="_blank"
rel="noreferrer"
className={btn}
>
Source Code
</a>
<button type="button" onClick={passwordForm} className={btn}>
Passwort ändern
</button>
</a>
<button
type="button"
onClick={passwordForm}
className="h-9 px-3 rounded-md border border-slate-300 text-slate-700 hover:bg-slate-100 transition"
>
Passwort ändern
</button>
<button
type="button"
onClick={onLogout}
className={`${btn} border-rose-300 hover:bg-rose-50`}
>
Logout
</button>
</nav>
</div>
</header>
);