Seed: editorial template (15 files)

src/components/Footer.tsx

@@ -0,0 +1,90 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Twitter, Instagram, Facebook, Youtube } from "lucide-react";
+import { toast } from "sonner";
+import { useSaasMutation } from "@/hooks/use-tygarun";
+
+export default function Footer() {
+  const [email, setEmail] = useState("");
+  const { mutate: subscribeNewsletter, loading: subscribing } = useSaasMutation("email", "/send/newsletter-confirm");
+  const handleSubscribe = async () => {
+    if (!email) return;
+    try { await subscribeNewsletter({ email }); setEmail(""); toast.success("Subscribed!"); }
+    catch { toast.error("Could not subscribe. Please try again."); }
+  };
+  const sections = [
+    { label: "Culture", to: "/category" },
+    { label: "Style", to: "/category" },
+    { label: "Technology", to: "/category" },
+    { label: "Travel", to: "/category" },
+    { label: "Food", to: "/category" },
+    { label: "Opinion", to: "/category" },
+  ];
+  const about = [
+    { label: "About Us", to: "/contributors" },
+    { label: "Contributors", to: "/contributors" },
+    { label: "Careers", to: "/" },
+    { label: "Contact", to: "/" },
+  ];
+  const follow = [
+    { label: "Twitter", icon: Twitter, href: "#" },
+    { label: "Instagram", icon: Instagram, href: "#" },
+    { label: "Facebook", icon: Facebook, href: "#" },
+    { label: "YouTube", icon: Youtube, href: "#" },
+  ];
+
+  return (
+    <footer className="bg-stone-100 dark:bg-stone-900 border-t border-stone-200 dark:border-stone-800">
+      <div className="mx-auto max-w-6xl px-6 py-16">
+        <div className="grid grid-cols-1 md:grid-cols-5 gap-10">
+          <div className="md:col-span-2">
+            <h3 className="font-serif text-2xl font-bold text-stone-800 dark:text-stone-100">The Current</h3>
+            <p className="mt-2 text-sm text-stone-500 dark:text-stone-400 leading-relaxed">Stories that matter. Perspectives that challenge. Ideas that endure.</p>
+            <div className="mt-6">
+              <p className="text-xs uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300 mb-3">Newsletter</p>
+              <div className="flex gap-2">
+                <Input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="your@email.com" className="bg-white dark:bg-stone-800 border-stone-300 dark:border-stone-700 text-sm" />
+                <Button size="sm" disabled={subscribing} className="bg-stone-800 hover:bg-stone-700 text-stone-50 dark:bg-stone-200 dark:text-stone-900 dark:hover:bg-stone-300" onClick={handleSubscribe}>Join</Button>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <p className="text-xs uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300 font-medium mb-4">Sections</p>
+            <ul className="space-y-2">
+              {sections.map((s) => (
+                <li key={s.label}><Link to={s.to} className="text-sm text-stone-500 hover:text-stone-800 dark:text-stone-400 dark:hover:text-stone-200 transition-colors">{s.label}</Link></li>
+              ))}
+            </ul>
+          </div>
+
+          <div>
+            <p className="text-xs uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300 font-medium mb-4">About</p>
+            <ul className="space-y-2">
+              {about.map((a) => (
+                <li key={a.label}><Link to={a.to} className="text-sm text-stone-500 hover:text-stone-800 dark:text-stone-400 dark:hover:text-stone-200 transition-colors">{a.label}</Link></li>
+              ))}
+            </ul>
+          </div>
+
+          <div>
+            <p className="text-xs uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300 font-medium mb-4">Follow</p>
+            <div className="flex flex-col gap-3">
+              {follow.map((f) => (
+                <a key={f.label} href={f.href} className="flex items-center gap-2 text-sm text-stone-500 hover:text-stone-800 dark:text-stone-400 dark:hover:text-stone-200 transition-colors">
+                  <f.icon className="h-4 w-4" /> {f.label}
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-12 pt-8 border-t border-stone-200 dark:border-stone-800 text-center">
+          <p className="text-xs text-stone-400 dark:text-stone-500">© 2026 The Current Magazine. All rights reserved.</p>
+        </div>
+      </div>
+    </footer>
+  );
+}