fediversion/frontend/app/[vertical]/shows/page.tsx
fullsizemalt d4f6f60df6
Some checks failed
Deploy Fediversion / deploy (push) Failing after 1s
fix: update dynamic routes for Next.js 16 async params API
2025-12-29 22:16:11 -08:00

74 lines
2.7 KiB
TypeScript

import { VERTICALS } from "@/config/verticals"
import { notFound } from "next/navigation"
import { getApiUrl } from "@/lib/api-config"
interface Props {
params: Promise<{ vertical: string }>
}
export function generateStaticParams() {
return VERTICALS.map((v) => ({
vertical: v.slug,
}))
}
async function getShows(verticalSlug: string) {
try {
const res = await fetch(`${getApiUrl()}/shows?vertical=${verticalSlug}`, {
next: { revalidate: 60 }
})
if (!res.ok) return []
return res.json()
} catch {
return []
}
}
export default async function ShowsPage({ params }: Props) {
const { vertical: verticalSlug } = await params
const vertical = VERTICALS.find((v) => v.slug === verticalSlug)
if (!vertical) {
notFound()
}
const shows = await getShows(vertical.slug)
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<h1 className="text-3xl font-bold">{vertical.name} Shows</h1>
</div>
{shows.length === 0 ? (
<div className="text-center py-12 text-muted-foreground">
<p>No shows imported yet for {vertical.name}.</p>
<p className="text-sm mt-2">Run the data importer to populate shows.</p>
</div>
) : (
<div className="space-y-4">
{shows.map((show: any) => (
<a
key={show.id}
href={`/${vertical.slug}/shows/${show.slug}`}
className="block p-4 rounded-lg border bg-card hover:bg-accent transition-colors"
>
<div className="flex justify-between items-start">
<div>
<div className="font-semibold">{show.venue?.name || "Unknown Venue"}</div>
<div className="text-sm text-muted-foreground">
{show.venue?.city}, {show.venue?.state || show.venue?.country}
</div>
</div>
<div className="text-right">
<div className="font-mono">{new Date(show.date).toLocaleDateString()}</div>
<div className="text-sm text-muted-foreground">{show.tour?.name}</div>
</div>
</div>
</a>
))}
</div>
)}
</div>
)
}