Repository Public
1import Link from "next/link";2import { Logo } from "./Logo";3import { TabBar } from "./TabBar";4import { ThemeToggle } from "./Theme";5import { dict, href, type Locale } from "@/lib/i18n";67export function Header({ locale, overlay = false }: { locale: Locale; overlay?: boolean }) {8 const t = dict(locale);9 const other: Locale = locale === "fr" ? "en" : "fr";10 const links: [string, string][] = [[t.nav.feed, "/feed"], [t.nav.explore, "/explore"], [t.nav.series, "/series"], [t.nav.about, "/about"]];11 return (12 <>13 <header className={overlay ? "pointer-events-none fixed inset-x-0 top-0 z-40 bg-gradient-to-b from-black/65 to-transparent text-white lg:static lg:bg-none lg:text-[var(--color-text)]" : "glass sticky top-0 z-40 border-b border-[var(--color-line-soft)]"}>14 <div className="pointer-events-auto mx-auto flex h-14 max-w-[1400px] items-center gap-2 px-4 sm:px-6 md:h-16">15 <Link href={href(locale, "/")} aria-label={`${t.brand} — ${t.nav.home}`} className="shrink-0"><Logo /></Link>16 <nav aria-label="Primary" className="ml-6 hidden items-center gap-1 text-[0.95rem] font-medium md:flex">17 {links.map(([label, path]) => <Link key={path} href={href(locale, path)} className="rounded-full px-3.5 py-2 text-[var(--color-muted)] transition-colors hover:bg-[var(--color-raised)] hover:text-[var(--color-text)]">{label}</Link>)}18 </nav>19 <div className={`ml-auto flex items-center gap-0.5 ${overlay ? "max-lg:[&_*]:!text-white" : ""}`}>20 <Link href={href(locale, "/search")} aria-label={t.nav.search} className="hidden h-11 w-11 place-items-center rounded-full text-[var(--color-muted)] hover:bg-[var(--color-raised)] hover:text-[var(--color-text)] md:grid">21 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5" /><path d="M16 16l4.5 4.5" /></svg>22 </Link>23 <Link href={href(other, "/")} hrefLang={other} lang={other} aria-label={t.footer.language} className="grid h-11 min-w-11 place-items-center rounded-full px-2 text-sm font-semibold uppercase text-[var(--color-muted)] hover:bg-[var(--color-raised)] hover:text-[var(--color-text)]">{other}</Link>24 {!overlay && <ThemeToggle labels={locale === "fr" ? { light: "Thème clair", dark: "Thème sombre" } : undefined} />}25 </div>26 </div>27 </header>28 <TabBar base={locale === "fr" ? "/fr" : ""} dark={overlay} labels={{ home: t.nav.home, feed: t.nav.feed, explore: t.nav.explore, series: t.nav.series, search: t.nav.search }} />29 </>30 );31}3233export function Footer({ locale, path = "/" }: { locale: Locale; path?: string }) {34 const t = dict(locale);35 const other: Locale = locale === "fr" ? "en" : "fr";36 return (37 <footer className="has-tabbar mt-20 border-t border-[var(--color-line-soft)]">38 <div className="mx-auto flex max-w-[1400px] flex-col gap-6 px-4 py-10 text-sm text-[var(--color-faint)] sm:px-6 md:flex-row md:items-center md:justify-between">39 <div className="text-[var(--color-text)]"><Logo size={18} /><p className="mt-3 max-w-md text-[var(--color-faint)]">{t.footer.disclosure} {t.footer.by}.</p></div>40 <nav aria-label="Footer" className="flex flex-wrap gap-x-6 gap-y-3">41 <Link href={href(locale, "/about")} className="hover:text-[var(--color-text)]">{t.nav.about}</Link>42 <Link href={href(locale, "/saved")} className="hover:text-[var(--color-text)]">{t.nav.saved}</Link>43 <Link href={href(locale, "/report")} className="hover:text-[var(--color-text)]">{t.report.title}</Link>44 <a href="/api/openapi.json" className="hover:text-[var(--color-text)]">{t.footer.api}</a>45 <Link href={href(other, path)} hrefLang={other} lang={other} className="hover:text-[var(--color-text)]">{t.footer.language}</Link>46 <a href="/studio" className="hover:text-[var(--color-text)]" rel="nofollow">{t.footer.studio}</a>47 </nav>48 </div>49 </footer>50 );51}52