karbe/src/components/SiteHeader.tsx
Claude Integration 2545a5e1a8
All checks were successful
CI / test (pull_request) Successful in 2m18s
feat: « Au fil de l'eau » — Reels mobile + uploader pro + favoris
2026-06-02 00:27:16 +00:00

85 lines
3.2 KiB
TypeScript

/**
* Header global affiché sur toutes les pages PUBLIQUES (hors /admin qui a son
* propre shell). Charge la session côté serveur pour adapter les liens.
*/
import Link from "next/link";
import { auth } from "@/auth";
import { UserRole } from "@/generated/prisma/enums";
import { SignOutButton } from "./SignOutButton";
export async function SiteHeader() {
const session = await auth();
const u = session?.user;
const isAdmin = u?.role === UserRole.ADMIN;
const isOwner = u?.role === UserRole.OWNER || isAdmin;
return (
<header className="sticky top-0 z-30 border-b border-zinc-200 bg-white/85 backdrop-blur supports-[backdrop-filter]:bg-white/70">
<div className="mx-auto flex h-12 max-w-7xl items-center justify-between gap-4 px-4">
<Link href="/" className="flex items-center gap-2 text-base font-semibold text-zinc-900">
<span className="inline-flex h-6 w-6 items-center justify-center rounded-md bg-emerald-600 text-xs font-bold text-white">
K
</span>
Karbé
</Link>
<nav className="hidden items-center gap-5 text-sm text-zinc-700 sm:flex">
<Link href="/decouvrir" className="hover:text-zinc-900">
Au fil de l&apos;eau
</Link>
<Link href="/carbets" className="hover:text-zinc-900">
Catalogue
</Link>
<Link href="/comment-ca-marche" className="hover:text-zinc-900">
Comment ça marche
</Link>
</nav>
<div className="flex items-center gap-3 text-sm">
{u ? (
<>
<Link href="/mes-favoris" className="hidden text-zinc-700 hover:text-zinc-900 sm:inline">
Favoris
</Link>
<Link href="/mes-reservations" className="hidden text-zinc-700 hover:text-zinc-900 sm:inline">
Mes réservations
</Link>
<Link href="/mon-compte" className="hidden text-zinc-700 hover:text-zinc-900 sm:inline">
Mon compte
</Link>
{isOwner ? (
<Link href="/espace-hote" className="hidden text-zinc-700 hover:text-zinc-900 sm:inline">
Espace hôte
</Link>
) : null}
{isAdmin ? (
<Link href="/admin" className="hidden rounded-md bg-zinc-900 px-2.5 py-1 text-xs font-semibold text-white hover:bg-zinc-800 sm:inline-block">
Admin
</Link>
) : null}
<span className="hidden max-w-[14ch] truncate text-xs text-zinc-500 md:inline" title={u.email ?? ""}>
{u.name || u.email}
</span>
<SignOutButton />
</>
) : (
<>
<Link href="/connexion" className="text-zinc-700 hover:text-zinc-900">
Connexion
</Link>
<Link
href="/inscription"
className="rounded-md bg-zinc-900 px-3 py-1 text-xs font-semibold text-white hover:bg-zinc-800"
>
Créer un compte
</Link>
</>
)}
</div>
</div>
</header>
);
}