252 lines
12 KiB
TypeScript
252 lines
12 KiB
TypeScript
import { notFound } from "next/navigation"
|
|
import { VERTICALS } from "@/config/verticals"
|
|
import { getApiUrl } from "@/lib/api-config"
|
|
import Link from "next/link"
|
|
import { Calendar, MapPin, Music, Trophy, Video, Ticket, Building, ChevronRight } from "lucide-react"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table"
|
|
import { Show, Song, PaginatedResponse } from "@/types/models"
|
|
|
|
interface Props {
|
|
params: Promise<{ vertical: string }>
|
|
}
|
|
|
|
export function generateStaticParams() {
|
|
return VERTICALS.map((v) => ({
|
|
vertical: v.slug,
|
|
}))
|
|
}
|
|
|
|
async function getRecentShows(verticalSlug: string): Promise<Show[]> {
|
|
try {
|
|
// Fetch 10 recent shows
|
|
const res = await fetch(`${getApiUrl()}/shows/?vertical_slugs=${verticalSlug}&limit=10&status=past`, {
|
|
next: { revalidate: 60 }
|
|
})
|
|
if (!res.ok) return []
|
|
const data: PaginatedResponse<Show> = await res.json()
|
|
return data.data || []
|
|
} catch {
|
|
return []
|
|
}
|
|
}
|
|
|
|
async function getTopSongs(verticalSlug: string): Promise<Song[]> {
|
|
try {
|
|
// Fetch top 10 songs, assuming backend now populates times_played
|
|
const res = await fetch(`${getApiUrl()}/songs/?vertical=${verticalSlug}&limit=10&sort=times_played`, {
|
|
next: { revalidate: 60 }
|
|
})
|
|
if (!res.ok) return []
|
|
const data: PaginatedResponse<Song> = await res.json()
|
|
return data.data || []
|
|
} catch {
|
|
return []
|
|
}
|
|
}
|
|
|
|
async function getVerticalStats(verticalSlug: string) {
|
|
try {
|
|
const res = await fetch(`${getApiUrl()}/bands/${verticalSlug}`, {
|
|
next: { revalidate: 300 }
|
|
})
|
|
if (!res.ok) return null
|
|
return res.json()
|
|
} catch {
|
|
return null
|
|
}
|
|
}
|
|
|
|
export default async function VerticalPage({ params }: Props) {
|
|
const { vertical: verticalSlug } = await params
|
|
const vertical = VERTICALS.find((v) => v.slug === verticalSlug)
|
|
|
|
if (!vertical) {
|
|
notFound()
|
|
}
|
|
|
|
const [recentShows, topSongs, bandProfile] = await Promise.all([
|
|
getRecentShows(verticalSlug),
|
|
getTopSongs(verticalSlug),
|
|
getVerticalStats(verticalSlug)
|
|
])
|
|
|
|
const stats = bandProfile?.stats || {}
|
|
|
|
return (
|
|
<div className="space-y-8 pb-12">
|
|
{/* Hero Section - Compact & Utilitarian */}
|
|
<section className="bg-muted/30 border-b">
|
|
<div className="container py-8 px-4">
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
|
|
<div className="space-y-2">
|
|
<h1 className="text-4xl font-bold tracking-tight">{vertical.name}</h1>
|
|
<p className="text-muted-foreground max-w-2xl text-lg">
|
|
{vertical.description}
|
|
</p>
|
|
</div>
|
|
|
|
{/* High-Level Stats */}
|
|
<div className="grid grid-cols-3 gap-8 text-center md:text-right">
|
|
<div>
|
|
<div className="text-3xl font-bold">{stats.total_shows || 0}</div>
|
|
<div className="text-sm text-muted-foreground font-medium uppercase tracking-wider">Shows</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-3xl font-bold">{stats.total_songs || 0}</div>
|
|
<div className="text-sm text-muted-foreground font-medium uppercase tracking-wider">Songs</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-3xl font-bold">{stats.total_venues || 0}</div>
|
|
<div className="text-sm text-muted-foreground font-medium uppercase tracking-wider">Venues</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick Actions Bar */}
|
|
<div className="flex flex-wrap gap-2 mt-8">
|
|
<Link href={`/${verticalSlug}/shows`}>
|
|
<Button variant="outline" size="sm" className="gap-2">
|
|
<Calendar className="h-4 w-4" /> Shows
|
|
</Button>
|
|
</Link>
|
|
<Link href={`/${verticalSlug}/songs`}>
|
|
<Button variant="outline" size="sm" className="gap-2">
|
|
<Music className="h-4 w-4" /> Songs
|
|
</Button>
|
|
</Link>
|
|
<Link href={`/${verticalSlug}/venues`}>
|
|
<Button variant="outline" size="sm" className="gap-2">
|
|
<MapPin className="h-4 w-4" /> Venues
|
|
</Button>
|
|
</Link>
|
|
<Link href={`/${verticalSlug}/performances`}>
|
|
<Button variant="outline" size="sm" className="gap-2">
|
|
<Trophy className="h-4 w-4" /> Top Rated
|
|
</Button>
|
|
</Link>
|
|
<Link href={`/videos?band=${verticalSlug}`}>
|
|
<Button variant="outline" size="sm" className="gap-2">
|
|
<Video className="h-4 w-4" /> Videos
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div className="container px-4 space-y-12">
|
|
<div className="grid gap-8 lg:grid-cols-2">
|
|
{/* Recent Shows Table */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-2xl font-bold tracking-tight">Recent Shows</h2>
|
|
<Link href={`/${verticalSlug}/shows`}>
|
|
<Button variant="ghost" size="sm" className="gap-1">
|
|
View All <ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
<Card>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Date</TableHead>
|
|
<TableHead>Venue</TableHead>
|
|
<TableHead className="text-right">Location</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{recentShows.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={3} className="text-center h-24 text-muted-foreground">
|
|
No shows found
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
recentShows.map((show) => (
|
|
<TableRow key={show.id}>
|
|
<TableCell className="font-medium whitespace-nowrap">
|
|
<Link href={`/${verticalSlug}/shows/${show.slug}`} className="hover:underline text-primary">
|
|
{new Date(show.date).toLocaleDateString('en-US', {
|
|
month: 'short', day: 'numeric', year: 'numeric'
|
|
})}
|
|
</Link>
|
|
</TableCell>
|
|
<TableCell>
|
|
<span className="line-clamp-1">{show.venue?.name || "Unknown"}</span>
|
|
</TableCell>
|
|
<TableCell className="text-right text-muted-foreground">
|
|
{show.venue?.city}, {show.venue?.state}
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Most Played Songs Table */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-2xl font-bold tracking-tight">Most Played Songs</h2>
|
|
<Link href={`/${verticalSlug}/songs`}>
|
|
<Button variant="ghost" size="sm" className="gap-1">
|
|
View Catalog <ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
<Card>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Title</TableHead>
|
|
<TableHead className="text-right">Plays</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{topSongs.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={2} className="text-center h-24 text-muted-foreground">
|
|
No songs found
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
topSongs.map((song) => (
|
|
<TableRow key={song.id}>
|
|
<TableCell className="font-medium">
|
|
<Link href={`/${verticalSlug}/songs/${song.slug}`} className="hover:underline text-primary">
|
|
{song.title}
|
|
</Link>
|
|
{song.original_artist && (
|
|
<span className="ml-2 text-xs text-muted-foreground">
|
|
by {song.original_artist}
|
|
</span>
|
|
)}
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<Badge variant="secondary">{song.times_played || 0}</Badge>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|