Refactor Header component to improve code readability by formatting Link elements and adding a new settings link for user navigation.
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 3m12s

This commit is contained in:
Julien Froidefond
2026-02-20 13:31:23 +01:00
parent e30cfedea8
commit 65fee6baf7
3 changed files with 218 additions and 6 deletions

View File

@@ -10,24 +10,44 @@ export function Header() {
return (
<header className="sticky top-0 z-50 border-b border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900 shadow-sm dark:shadow-none backdrop-blur-sm">
<div className="mx-auto flex h-12 max-w-6xl items-center justify-between px-4">
<Link href="/" className="font-mono text-sm font-medium text-zinc-900 dark:text-zinc-50 tracking-tight">
<Link
href="/"
className="font-mono text-sm font-medium text-zinc-900 dark:text-zinc-50 tracking-tight"
>
iag-eval
</Link>
<nav className="flex items-center gap-6 font-mono text-xs">
{status === "authenticated" ? (
<>
<Link href="/dashboard" className="text-zinc-500 hover:text-cyan-600 dark:text-zinc-400 dark:hover:text-cyan-400 transition-colors">
<Link
href="/dashboard"
className="text-zinc-500 hover:text-cyan-600 dark:text-zinc-400 dark:hover:text-cyan-400 transition-colors"
>
/dashboard
</Link>
<Link href="/evaluations/new" className="text-zinc-500 hover:text-cyan-600 dark:text-zinc-400 dark:hover:text-cyan-400 transition-colors">
<Link
href="/evaluations/new"
className="text-zinc-500 hover:text-cyan-600 dark:text-zinc-400 dark:hover:text-cyan-400 transition-colors"
>
/new
</Link>
{session?.user?.role === "admin" && (
<Link href="/admin" className="text-zinc-500 hover:text-cyan-600 dark:text-zinc-400 dark:hover:text-cyan-400 transition-colors">
<Link
href="/admin"
className="text-zinc-500 hover:text-cyan-600 dark:text-zinc-400 dark:hover:text-cyan-400 transition-colors"
>
/admin
</Link>
)}
<span className="text-zinc-400 dark:text-zinc-500">{session?.user?.email}</span>
<Link
href="/settings"
className="text-zinc-500 hover:text-cyan-600 dark:text-zinc-400 dark:hover:text-cyan-400 transition-colors"
>
/paramètres
</Link>
<span className="text-zinc-400 dark:text-zinc-500">
{session?.user?.email}
</span>
<button
type="button"
onClick={async () => {
@@ -40,7 +60,10 @@ export function Header() {
</button>
</>
) : (
<Link href="/auth/login" className="text-zinc-500 hover:text-cyan-600 dark:text-zinc-400 dark:hover:text-cyan-400 transition-colors">
<Link
href="/auth/login"
className="text-zinc-500 hover:text-cyan-600 dark:text-zinc-400 dark:hover:text-cyan-400 transition-colors"
>
Se connecter
</Link>
)}