93 lines
3.9 KiB
TypeScript
93 lines
3.9 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import { getApiUrl } from "@/lib/api-config"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import Link from "next/link"
|
|
import { Map, Calendar } from "lucide-react"
|
|
|
|
interface Tour {
|
|
id: number
|
|
name: string
|
|
slug: string
|
|
start_date: string
|
|
end_date: string
|
|
show_count: number
|
|
}
|
|
|
|
export default function ToursPage() {
|
|
const [tours, setTours] = useState<Tour[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
fetch(`${getApiUrl()}/tours/?limit=200`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
// Sort by start date descending
|
|
const sorted = data.sort((a: Tour, b: Tour) =>
|
|
new Date(b.start_date).getTime() - new Date(a.start_date).getTime()
|
|
)
|
|
setTours(sorted)
|
|
})
|
|
.catch(console.error)
|
|
.finally(() => setLoading(false))
|
|
}, [])
|
|
|
|
// Group tours by year
|
|
const toursByYear = tours.reduce((acc, tour) => {
|
|
const year = new Date(tour.start_date).getFullYear()
|
|
if (!acc[year]) acc[year] = []
|
|
acc[year].push(tour)
|
|
return acc
|
|
}, {} as Record<number, Tour[]>)
|
|
|
|
const years = Object.keys(toursByYear).map(Number).sort((a, b) => b - a)
|
|
|
|
if (loading) return <div className="container py-10">Loading tours...</div>
|
|
|
|
return (
|
|
<div className="container py-10 space-y-8">
|
|
<div className="flex flex-col gap-2">
|
|
<h1 className="text-3xl font-bold tracking-tight">Tours</h1>
|
|
<p className="text-muted-foreground">
|
|
Follow the band across the country, tour by tour.
|
|
</p>
|
|
</div>
|
|
|
|
{years.map(year => (
|
|
<div key={year} className="space-y-4">
|
|
<h2 className="text-xl font-semibold text-muted-foreground border-b pb-2">{year}</h2>
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{toursByYear[year].map((tour) => (
|
|
<Link key={tour.id} href={`/tours/${tour.slug || tour.id}`}>
|
|
<Card className="h-full hover:bg-accent/50 transition-colors">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="flex items-center justify-between">
|
|
<span className="flex items-center gap-2">
|
|
<Map className="h-5 w-5 text-orange-500" />
|
|
{tour.name}
|
|
</span>
|
|
<Badge variant="secondary" className="ml-2">
|
|
{tour.show_count} shows
|
|
</Badge>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-muted-foreground flex items-center gap-2">
|
|
<Calendar className="h-4 w-4" />
|
|
{new Date(tour.start_date).toLocaleDateString("en-US", { month: "short", day: "numeric" })}
|
|
{" - "}
|
|
{new Date(tour.end_date).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|