121 lines
4.5 KiB
TypeScript
121 lines
4.5 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState, Suspense } from "react"
|
|
import { getApiUrl } from "@/lib/api-config"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import Link from "next/link"
|
|
import { Calendar, MapPin, Loader2, ArrowLeft } from "lucide-react"
|
|
import { Skeleton } from "@/components/ui/skeleton"
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
interface Show {
|
|
id: number
|
|
slug?: string
|
|
date: string
|
|
venue: {
|
|
id: number
|
|
name: string
|
|
city: string
|
|
state: string
|
|
}
|
|
}
|
|
|
|
function UpcomingShowsContent() {
|
|
const [shows, setShows] = useState<Show[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
// Fetch upcoming shows
|
|
fetch(`${getApiUrl()}/shows/upcoming?limit=100`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
// Already sorted ascending by backend, but ensure just in case
|
|
setShows(data)
|
|
})
|
|
.catch(console.error)
|
|
.finally(() => setLoading(false))
|
|
}, [])
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="container py-10 space-y-8">
|
|
<div className="flex flex-col gap-2">
|
|
<Skeleton className="h-10 w-48" />
|
|
<Skeleton className="h-5 w-96" />
|
|
</div>
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{Array.from({ length: 6 }).map((_, i) => (
|
|
<Skeleton key={i} className="h-40 w-full" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="container py-10 space-y-8 animate-in fade-in duration-700">
|
|
<div className="flex items-center gap-4">
|
|
<Link href="/shows">
|
|
<Button variant="ghost" size="icon">
|
|
<ArrowLeft className="h-5 w-5" />
|
|
</Button>
|
|
</Link>
|
|
<div className="flex flex-col gap-1">
|
|
<h1 className="text-3xl font-bold tracking-tight">Upcoming Shows</h1>
|
|
<p className="text-muted-foreground">
|
|
See where the flock is headed next.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{shows.length === 0 ? (
|
|
<div className="text-center py-20 bg-muted/20 rounded-lg">
|
|
<h3 className="text-lg font-medium text-muted-foreground">No upcoming shows found.</h3>
|
|
<p className="text-sm text-muted-foreground/70 mt-1">Check back later for tour announcements!</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{shows.map((show) => (
|
|
<Card key={show.id} className="h-full border-primary/20 hover:border-primary/50 transition-colors">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Calendar className="h-5 w-5 text-primary" />
|
|
{new Date(show.date).toLocaleDateString(undefined, {
|
|
weekday: 'long',
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
})}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex items-center gap-2 text-muted-foreground">
|
|
<MapPin className="h-4 w-4" />
|
|
<span>
|
|
{show.venue?.name}, {show.venue?.city}, {show.venue?.state}
|
|
</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function LoadingFallback() {
|
|
return (
|
|
<div className="container py-10 flex items-center justify-center min-h-[400px]">
|
|
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function UpcomingShowsPage() {
|
|
return (
|
|
<Suspense fallback={<LoadingFallback />}>
|
|
<UpcomingShowsContent />
|
|
</Suspense>
|
|
)
|
|
}
|