63 lines
2.6 KiB
TypeScript
63 lines
2.6 KiB
TypeScript
import Link from "next/link";
|
|
import { ThemeToggle } from "@/components/ThemeToggle";
|
|
import { brand } from "@/content/ebook";
|
|
|
|
type SiteHeaderProps = {
|
|
ctaHref?: string;
|
|
ctaLabel?: string;
|
|
showBack?: boolean;
|
|
};
|
|
|
|
export function SiteHeader({
|
|
ctaHref = "/read",
|
|
ctaLabel = "Start reading",
|
|
showBack = false,
|
|
}: SiteHeaderProps) {
|
|
return (
|
|
<header className="sticky top-0 z-50 h-[var(--header-h)] border-b border-[var(--border)] bg-[var(--surface)]/95 backdrop-blur-xl dark:bg-[var(--background)]/90">
|
|
<div className="mx-auto flex h-full max-w-6xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
|
|
{showBack ? (
|
|
<Link
|
|
href="/"
|
|
className="flex shrink-0 items-center gap-1.5 text-sm font-medium text-[var(--muted)] transition-colors hover:text-[var(--foreground)] sm:hidden"
|
|
>
|
|
<span aria-hidden>←</span> Home
|
|
</Link>
|
|
) : null}
|
|
<Link
|
|
href="/"
|
|
className={`group flex min-w-0 items-center gap-2.5 ${showBack ? "hidden sm:flex" : "flex"}`}
|
|
>
|
|
<span
|
|
className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-[var(--gradient-1)] via-[var(--gradient-2)] to-[var(--gradient-3)] text-white shadow-md"
|
|
aria-hidden
|
|
>
|
|
<svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<circle cx="12" cy="12" r="9" />
|
|
<path d="M2 12h20M12 2c2.5 2.8 4 6 4 10s-1.5 7.2-4 10M12 2c-2.5 2.8-4 6-4 10s1.5 7.2 4 10" strokeLinecap="round" />
|
|
</svg>
|
|
</span>
|
|
<span className="min-w-0">
|
|
<span className="block truncate font-display text-sm font-bold tracking-tight text-[var(--foreground)] sm:text-base">
|
|
{brand.name}
|
|
</span>
|
|
<span className="hidden truncate text-[10px] font-medium uppercase tracking-wider text-[var(--muted)] sm:block">
|
|
{brand.tagline}
|
|
</span>
|
|
</span>
|
|
</Link>
|
|
|
|
<div className="flex items-center gap-2 sm:gap-3">
|
|
<ThemeToggle />
|
|
<Link
|
|
href={ctaHref}
|
|
className="hidden h-10 items-center justify-center rounded-full bg-gradient-to-r from-[var(--gradient-1)] via-[var(--gradient-2)] to-[var(--gradient-3)] px-5 text-sm font-semibold text-white shadow-[var(--glow-sm)] transition-transform hover:scale-[1.02] active:scale-[0.98] sm:inline-flex"
|
|
>
|
|
{ctaLabel}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|