147 lines
6.4 KiB
TypeScript
147 lines
6.4 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 Link from "next/link"
|
|
import { Star, MapPin, Music } from "lucide-react"
|
|
|
|
interface TopShow {
|
|
show: {
|
|
id: number
|
|
date: string
|
|
venue_id: number
|
|
}
|
|
venue: {
|
|
id: number
|
|
name: string
|
|
city: string
|
|
state: string
|
|
}
|
|
avg_score: number
|
|
review_count: number
|
|
}
|
|
|
|
interface TopVenue {
|
|
venue: {
|
|
id: number
|
|
name: string
|
|
city: string
|
|
state: string
|
|
}
|
|
avg_score: number
|
|
review_count: number
|
|
}
|
|
|
|
|
|
export default function LeaderboardsPage() {
|
|
const [topShows, setTopShows] = useState<TopShow[]>([])
|
|
const [topVenues, setTopVenues] = useState<TopVenue[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
const [showsRes, venuesRes] = await Promise.all([
|
|
fetch(`${getApiUrl()}/leaderboards/shows/top`),
|
|
fetch(`${getApiUrl()}/leaderboards/venues/top`)
|
|
])
|
|
|
|
setTopShows(await showsRes.json())
|
|
setTopVenues(await venuesRes.json())
|
|
} catch (error) {
|
|
console.error("Failed to fetch leaderboards:", error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
fetchData()
|
|
}, [])
|
|
|
|
if (loading) return <div className="container py-10">Loading leaderboards...</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">Leaderboards</h1>
|
|
<p className="text-muted-foreground">
|
|
Top rated shows and venues.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-2">
|
|
{/* Top Shows */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Music className="h-5 w-5 text-blue-500" />
|
|
Top Rated Shows
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
{topShows.map((item, i) => (
|
|
<div key={item.show.id} className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<span className={`flex h-6 w-6 items-center justify-center rounded-full text-xs font-bold ${i === 0 ? "bg-yellow-100 text-yellow-700" :
|
|
i === 1 ? "bg-gray-100 text-gray-700" :
|
|
i === 2 ? "bg-orange-100 text-orange-700" : "text-muted-foreground"
|
|
}`}>
|
|
{i + 1}
|
|
</span>
|
|
<Link href={`/shows/${item.show.id}`} className="font-medium hover:underline block">
|
|
{new Date(item.show.date).toLocaleDateString()}
|
|
<span className="text-sm font-normal text-muted-foreground ml-2">
|
|
{item.venue?.name ? `${item.venue.name} (${item.venue.city}, ${item.venue.state})` : ""}
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
<div className="flex items-center gap-1 text-sm">
|
|
<Star className="h-3 w-3 fill-yellow-500 text-yellow-500" />
|
|
<span className="font-bold">{item.avg_score}</span>
|
|
<span className="text-muted-foreground text-xs">({item.review_count})</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Top Venues */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<MapPin className="h-5 w-5 text-green-500" />
|
|
Top Venues
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
{topVenues.map((item, i) => (
|
|
<div key={item.venue.id} className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3 overflow-hidden">
|
|
<span className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-bold ${i === 0 ? "bg-yellow-100 text-yellow-700" :
|
|
i === 1 ? "bg-gray-100 text-gray-700" :
|
|
i === 2 ? "bg-orange-100 text-orange-700" : "text-muted-foreground"
|
|
}`}>
|
|
{i + 1}
|
|
</span>
|
|
<Link href={`/venues/${item.venue.id}`} className="font-medium hover:underline truncate">
|
|
{item.venue.name}
|
|
</Link>
|
|
</div>
|
|
<div className="flex items-center gap-1 text-sm shrink-0">
|
|
<Star className="h-3 w-3 fill-yellow-500 text-yellow-500" />
|
|
<span className="font-bold">{item.avg_score}</span>
|
|
<span className="text-muted-foreground text-xs">({item.review_count})</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|