Seed: editorial template (15 files)

2026-07-23 22:14:19 +00:00
parent 5db1ebbc07
commit 53c0d82b9c
1 changed files with 67 additions and 0 deletions
@@ -0,0 +1,67 @@
+import { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { Menu, Search } from "lucide-react";
+import { ThemeToggle } from "@/components/ThemeToggle";
+
+export default function Header() {
+  const [open, setOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const fn = () => setScrolled(window.scrollY > 20);
+    window.addEventListener("scroll", fn);
+    return () => window.removeEventListener("scroll", fn);
+  }, []);
+
+  const leftLinks = [
+    { label: "Stories", to: "/" },
+    { label: "Culture", to: "/category" },
+    { label: "Style", to: "/category" },
+  ];
+
+  const rightLinks = [
+    { label: "Subscribe", to: "/contributors" },
+  ];
+
+  return (
+    <header className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 \${scrolled ? "bg-stone-50/90 dark:bg-stone-950/90 backdrop-blur-lg border-b border-stone-200 dark:border-stone-800" : "bg-transparent"}`}>
+      <div className="mx-auto max-w-6xl px-6 py-4">
+        <div className="flex items-center justify-between">
+          <nav className="hidden md:flex items-center gap-6">
+            {leftLinks.map((l) => (
+              <Link key={l.label} to={l.to} className="text-xs uppercase tracking-[0.2em] text-stone-500 hover:text-stone-800 dark:text-stone-400 dark:hover:text-stone-200 transition-colors">{l.label}</Link>
+            ))}
+          </nav>
+
+          <Link to="/" className="absolute left-1/2 -translate-x-1/2 font-serif text-2xl md:text-3xl font-bold text-stone-800 dark:text-stone-100 tracking-tight">The Current</Link>
+
+          <nav className="hidden md:flex items-center gap-5">
+            {rightLinks.map((l) => (
+              <Link key={l.label} to={l.to} className="text-xs uppercase tracking-[0.2em] text-stone-500 hover:text-stone-800 dark:text-stone-400 dark:hover:text-stone-200 transition-colors">{l.label}</Link>
+            ))}
+            <Button variant="ghost" size="icon" className="h-8 w-8 text-stone-500 hover:text-stone-800 dark:text-stone-400">
+              <Search className="h-4 w-4" />
+            </Button>
+            <ThemeToggle />
+          </nav>
+
+          <Sheet open={open} onOpenChange={setOpen}>
+            <SheetTrigger asChild className="md:hidden ml-auto">
+              <Button variant="ghost" size="icon"><Menu className="h-5 w-5 text-stone-700 dark:text-stone-300" /></Button>
+            </SheetTrigger>
+            <SheetContent side="right" className="w-72 bg-stone-50 dark:bg-stone-950">
+              <nav className="mt-8 flex flex-col gap-5">
+                {[...leftLinks, ...rightLinks].map((l) => (
+                  <Link key={l.label} to={l.to} className="text-lg font-serif text-stone-700 dark:text-stone-300" onClick={() => setOpen(false)}>{l.label}</Link>
+                ))}
+                <ThemeToggle />
+              </nav>
+            </SheetContent>
+          </Sheet>
+        </div>
+      </div>
+    </header>
+  );
+}