Seed: blog template (17 files)

src/components/Header.tsx

@@ -0,0 +1,100 @@
+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";
+
+const navLinks = [
+  { label: "Technology", to: "/category/technology" },
+  { label: "Design", to: "/category/design" },
+  { label: "Business", to: "/category/business" },
+  { label: "Lifestyle", to: "/category/lifestyle" },
+];
+
+export default function Header() {
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 20);
+    window.addEventListener("scroll", onScroll);
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  return (
+    <header className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 \${
+      scrolled
+        ? "bg-white/95 backdrop-blur-lg border-b border-stone-100 shadow-sm"
+        : "bg-white/80 backdrop-blur-sm"
+    }`}>
+      <div className="mx-auto max-w-7xl flex items-center justify-between px-6 py-3.5">
+        {/* Logo */}
+        <Link to="/" className="flex items-center gap-2">
+          <div className="h-8 w-8 rounded-lg bg-emerald-600 flex items-center justify-center">
+            <span className="text-white font-bold text-sm">B</span>
+          </div>
+          <span className="text-xl font-bold tracking-tight text-stone-900">ByteSize</span>
+        </Link>
+
+        {/* Desktop Nav */}
+        <nav className="hidden md:flex items-center gap-8">
+          {navLinks.map((l) => (
+            <Link
+              key={l.to}
+              to={l.to}
+              className="text-sm text-stone-500 hover:text-stone-900 transition-colors font-medium"
+            >
+              {l.label}
+            </Link>
+          ))}
+        </nav>
+
+        {/* Right Actions */}
+        <div className="flex items-center gap-1">
+          <Button asChild variant="ghost" size="icon" className="h-9 w-9 text-stone-500">
+            <Link to="/search"><Search className="h-4 w-4" /></Link>
+          </Button>
+          <ThemeToggle />
+          <Button asChild className="hidden sm:flex bg-emerald-600 hover:bg-emerald-700 active:scale-[0.98] text-white rounded-full px-5 text-sm ml-2">
+            <Link to="/">Subscribe</Link>
+          </Button>
+
+          {/* Mobile Menu */}
+          <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
+            <SheetTrigger asChild className="md:hidden">
+              <Button variant="ghost" size="icon" className="h-9 w-9 ml-1">
+                <Menu className="h-5 w-5" />
+              </Button>
+            </SheetTrigger>
+            <SheetContent side="right" className="w-72 bg-white">
+              <div className="mt-8 flex flex-col gap-1">
+                {navLinks.map((l) => (
+                  <Link
+                    key={l.to}
+                    to={l.to}
+                    className="px-4 py-3 text-base font-medium hover:bg-stone-50 rounded-lg transition-colors"
+                    onClick={() => setMobileOpen(false)}
+                  >
+                    {l.label}
+                  </Link>
+                ))}
+                <div className="border-t border-stone-100 mt-4 pt-4 space-y-1">
+                  <Link to="/search" className="flex items-center gap-3 px-4 py-3 text-sm text-stone-600 hover:bg-stone-50 rounded-lg" onClick={() => setMobileOpen(false)}>
+                    <Search className="h-4 w-4" /> Search
+                  </Link>
+                </div>
+                <div className="mt-4 px-4 space-y-3">
+                  <Button className="w-full bg-emerald-600 hover:bg-emerald-700 active:scale-[0.98] text-white rounded-full">
+                    Subscribe
+                  </Button>
+                  <ThemeToggle />
+                </div>
+              </div>
+            </SheetContent>
+          </Sheet>
+        </div>
+      </div>
+    </header>
+  );
+}