Seed: editorial template (15 files)

2026-07-23 22:14:23 +00:00
parent 057def056d
commit 2567752a43
1 changed files with 79 additions and 0 deletions
@@ -0,0 +1,79 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Clock } from "lucide-react";
+
+const sortOptions = ["Latest", "Popular", "Editors Pick"];
+
+const articles = [
+  { title: "The Art of Seeing Differently", excerpt: "A new exhibition challenges everything we thought we knew about perception.", author: "Amara Diallo", date: "April 6, 2026", readTime: "7 min", img: "https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=600&h=400&fit=crop" },
+  { title: "Underground Sounds: The Venues That Matter", excerpt: "How independent venues are shaping the next wave of musical innovation.", author: "Kai Mendez", date: "April 5, 2026", readTime: "9 min", img: "https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=600&h=400&fit=crop" },
+  { title: "Theater in the Age of Streaming", excerpt: "Three playwrights on why the stage still matters in the streaming age.", author: "Lila Osman", date: "April 4, 2026", readTime: "6 min", img: "https://images.unsplash.com/photo-1507924538820-ede94a04019d?w=600&h=400&fit=crop" },
+  { title: "Oral Traditions in a Digital World", excerpt: "The quiet power of stories passed between generations.", author: "Soren Blake", date: "April 3, 2026", readTime: "8 min", img: "https://images.unsplash.com/photo-1481627834876-b7833e8f5570?w=600&h=400&fit=crop" },
+  { title: "The Village of Books", excerpt: "How a small town in Portugal became a pilgrimage site for book lovers.", author: "Ines Moreau", date: "April 2, 2026", readTime: "5 min", img: "https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?w=600&h=400&fit=crop" },
+  { title: "When Food Becomes Art", excerpt: "The artists using food as their primary medium.", author: "Nadia Park", date: "April 1, 2026", readTime: "10 min", img: "https://images.unsplash.com/photo-1460661419201-fd4cecdf8a8b?w=600&h=400&fit=crop" },
+];
+
+export default function Category() {
+  const [activeSort, setActiveSort] = useState("Latest");
+
+  return (
+    <div className="min-h-screen bg-stone-50 dark:bg-stone-950">
+      <Header />
+      <main className="pt-24">
+
+        {/* Category Hero */}
+        <section className="mx-auto max-w-6xl px-6 mb-12">
+          <div className="bg-stone-100 dark:bg-stone-900 rounded-2xl p-10 md:p-14 text-center">
+            <Badge className="bg-stone-200 dark:bg-stone-800 text-stone-600 dark:text-stone-300 border-0 mb-4">Section</Badge>
+            <h1 className="font-serif text-4xl md:text-5xl font-bold text-stone-800 dark:text-stone-100 animate-fade-up">Culture</h1>
+            <p className="mt-3 text-stone-500 dark:text-stone-400 max-w-xl mx-auto leading-relaxed">Art, music, literature, and the forces shaping how we see the world.</p>
+            <p className="mt-4 text-sm text-stone-400 dark:text-stone-500">{articles.length} articles</p>
+          </div>
+        </section>
+
+        {/* Sort Options */}
+        <section className="mx-auto max-w-6xl px-6 mb-8">
+          <div className="flex gap-2">
+            {sortOptions.map((s) => (
+              <Button key={s} variant={activeSort === s ? "default" : "outline"} size="sm" onClick={() => setActiveSort(s)} className={activeSort === s ? "bg-stone-800 text-stone-50 dark:bg-stone-200 dark:text-stone-900" : "border-stone-300 dark:border-stone-700 text-stone-500 dark:text-stone-400"}>{s}</Button>
+            ))}
+          </div>
+        </section>
+
+        {/* Article Grid */}
+        <section className="mx-auto max-w-6xl px-6 mb-20">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 stagger">
+            {articles.map((a, i) => (
+              <Link key={i} to="/article" className="group">
+                <Card className="overflow-hidden border-stone-200 dark:border-stone-800 bg-white dark:bg-stone-900 hover:-translate-y-1 hover:shadow-lg transition-all duration-300 h-full">
+                  <div className="aspect-[3/2] overflow-hidden">
+                    <img src={a.img} alt={a.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                  </div>
+                  <CardContent className="p-5 flex flex-col flex-1">
+                    <h3 className="font-serif text-lg font-semibold text-stone-800 dark:text-stone-100 leading-snug group-hover:text-stone-600 dark:group-hover:text-stone-300 transition-colors">{a.title}</h3>
+                    <p className="mt-2 text-sm text-stone-500 dark:text-stone-400 line-clamp-2 leading-relaxed">{a.excerpt}</p>
+                    <div className="mt-auto pt-4 flex items-center justify-between text-xs text-stone-400 dark:text-stone-500">
+                      <div className="flex items-center gap-2">
+                        <Avatar className="h-5 w-5"><AvatarFallback className="text-[8px] bg-stone-200 dark:bg-stone-700 text-stone-600 dark:text-stone-300">{a.author.split(" ").map(w => w[0]).join("")}</AvatarFallback></Avatar>
+                        <span>{a.author}</span>
+                      </div>
+                      <span className="flex items-center gap-1"><Clock className="h-3 w-3" /> {a.readTime}</span>
+                    </div>
+                  </CardContent>
+                </Card>
+              </Link>
+            ))}
+          </div>
+        </section>
+
+      </main>
+      <Footer />
+    </div>
+  );
+}