From 9f57f4f3c2691a0c424124262be3a323b6c2be11 Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Sun, 28 Dec 2025 21:31:23 -0800
Subject: [PATCH] feat: Add vertical-specific archive page

---
 frontend/app/[vertical]/archive/page.tsx | 50 ++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 frontend/app/[vertical]/archive/page.tsx

diff --git a/frontend/app/[vertical]/archive/page.tsx b/frontend/app/[vertical]/archive/page.tsx
new file mode 100644
index 0000000..a78b990
--- /dev/null
+++ b/frontend/app/[vertical]/archive/page.tsx
@@ -0,0 +1,50 @@
+
+import { Card, CardContent } from "@/components/ui/card"
+import Link from "next/link"
+import { Calendar } from "lucide-react"
+import { VERTICALS } from "@/config/verticals"
+import { notFound } from "next/navigation"
+
+interface Props {
+    params: { vertical: string }
+}
+
+export function generateStaticParams() {
+    return VERTICALS.map((v) => ({
+        vertical: v.slug,
+    }))
+}
+
+// TODO: Make this dynamic based on the band's history
+const currentYear = new Date().getFullYear()
+const years = Array.from({ length: 50 }, (_, i) => currentYear - i)
+
+export default function VerticalArchivePage({ params }: Props) {
+    const vertical = VERTICALS.find((v) => v.slug === params.vertical)
+
+    if (!vertical) {
+        notFound()
+    }
+
+    return (
+        <div className="flex flex-col gap-6">
+            <h1 className="text-3xl font-bold tracking-tight">{vertical.name} Archive</h1>
+            <p className="text-muted-foreground">Browse shows by year.</p>
+            <div className="grid gap-4 md:grid-cols-3 lg:grid-cols-4">
+                {years.map((year) => (
+                    <Link key={year} href={`/${params.vertical}/shows?year=${year}`}>
+                        <Card className="hover:bg-accent/50 transition-colors cursor-pointer text-center py-6">
+                            <CardContent>
+                                <div className="text-4xl font-bold text-primary">{year}</div>
+                                <div className="flex items-center justify-center gap-2 mt-2 text-muted-foreground">
+                                    <Calendar className="h-4 w-4" />
+                                    <span>Browse Shows</span>
+                                </div>
+                            </CardContent>
+                        </Card>
+                    </Link>
+                ))}
+            </div>
+        </div>
+    )
+}