'init'

app/components/Header.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { ThemeToggle } from "./ThemeToggle";
+import { SITE_CONFIG } from "@/config/course";
+import { isPaid } from "@/app/lib/payment";
+
+export function Header() {
+  const [paid, setPaid] = useState(false);
+  useEffect(() => {
+    setPaid(isPaid());
+    const onPayUpdate = () => setPaid(isPaid());
+    window.addEventListener("pay:updated", onPayUpdate);
+    return () => window.removeEventListener("pay:updated", onPayUpdate);
+  }, []);
+
+  return (
+    <header className="fixed left-0 right-0 top-0 z-50 border-b border-[var(--border)] bg-[var(--background)]/90 backdrop-blur-xl">
+      <div className="mx-auto flex h-12 max-w-6xl items-center justify-between gap-2 px-3 sm:h-14 sm:gap-4 sm:px-4 md:h-16 md:px-6">
+        <Link href="/" className="min-w-0 truncate text-sm font-medium sm:text-base md:text-xl">
+          {SITE_CONFIG.brand}
+        </Link>
+        <div className="flex shrink-0 items-center gap-1.5 sm:gap-3">
+          <ThemeToggle />
+          <Link
+            href={paid ? "/course/0/0" : "/pay"}
+            className="hidden rounded-full bg-[var(--accent)] px-3 py-1.5 text-xs font-medium text-[var(--accent-foreground)] transition hover:opacity-90 sm:inline-flex sm:px-4 sm:py-2 sm:text-sm"
+          >
+            {paid ? "进入课程 →" : "立即报名 →"}
+          </Link>
+          <Link
+            href={paid ? "/course/0/0" : "/pay"}
+            className="inline-flex rounded-full bg-[var(--accent)] p-2 text-[var(--accent-foreground)] sm:hidden"
+            aria-label={paid ? "进入课程" : "立即报名"}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M5 12h14M12 5l7 7-7 7" />
+            </svg>
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}