'init'

components/SiteHeader.tsx

@@ -0,0 +1,62 @@
+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)]/70 bg-[var(--background)]/80 backdrop-blur-xl">
+      <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-lg shadow-teal-500/20"
+            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-md shadow-teal-500/20 transition-transform hover:scale-[1.02] active:scale-[0.98] sm:inline-flex"
+          >
+            {ctaLabel}
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}