feat: Add Heady Versions (performances) page
- /performances page with top-rated performance leaderboard - Added to Browse dropdown in navbar - Updated home page CTA to feature Heady Versions - Medal icons for top 3 performances
This commit is contained in:
fullsizemalt
parent
3987b64209
commit
06dc8889b5
3 changed files with 148 additions and 3 deletions
|
|
@ -86,13 +86,13 @@ export default async function Home() {
|
|||
<p className="max-w-[600px] text-lg text-muted-foreground">
|
||||
The ultimate community archive for Goose history.
|
||||
<br />
|
||||
Discover shows, rate performances, and connect with fans.
|
||||
Discover shows, rate performances, and find the <strong>heady versions</strong>.
|
||||
</p>
|
||||
<div className="flex gap-4">
|
||||
<Link href="/leaderboards">
|
||||
<Link href="/performances">
|
||||
<Button size="lg" className="gap-2">
|
||||
<Trophy className="h-4 w-4" />
|
||||
View Leaderboards
|
||||
Heady Versions
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/shows">
|
||||
|
|
|
|||
142
frontend/app/performances/page.tsx
Normal file
142
frontend/app/performances/page.tsx
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Trophy, Star, Calendar, MapPin, ExternalLink } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
import { getApiUrl } from "@/lib/api-config"
|
||||
|
||||
interface TopPerformance {
|
||||
performance: {
|
||||
id: number
|
||||
position: number
|
||||
set_name: string
|
||||
notes?: string
|
||||
youtube_link?: string
|
||||
}
|
||||
song: {
|
||||
id: number
|
||||
title: string
|
||||
}
|
||||
show: {
|
||||
id: number
|
||||
date: string
|
||||
}
|
||||
venue: {
|
||||
id: number
|
||||
name: string
|
||||
city: string
|
||||
state?: string
|
||||
}
|
||||
avg_score: number
|
||||
rating_count: number
|
||||
}
|
||||
|
||||
async function getTopPerformances(): Promise<TopPerformance[]> {
|
||||
try {
|
||||
const res = await fetch(`${getApiUrl()}/leaderboards/performances/top?limit=50`, {
|
||||
cache: 'no-store'
|
||||
})
|
||||
if (!res.ok) return []
|
||||
return res.json()
|
||||
} catch (e) {
|
||||
console.error('Failed to fetch top performances:', e)
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
export default async function PerformancesPage() {
|
||||
const performances = await getTopPerformances()
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="text-center py-8">
|
||||
<h1 className="text-4xl font-bold tracking-tight flex items-center justify-center gap-3">
|
||||
<Trophy className="h-10 w-10 text-yellow-500" />
|
||||
Heady Versions
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2 text-lg">
|
||||
The top-rated performances as voted by the community
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{performances.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{performances.map((item, index) => (
|
||||
<Link key={item.performance.id} href={`/performances/${item.performance.id}`}>
|
||||
<Card className={`hover:bg-accent/50 transition-colors cursor-pointer ${index === 0 ? 'border-2 border-yellow-500 bg-gradient-to-r from-yellow-50 to-orange-50 dark:from-yellow-900/10 dark:to-orange-900/10' :
|
||||
index === 1 ? 'border-gray-300 dark:border-gray-600' :
|
||||
index === 2 ? 'border-amber-600 dark:border-amber-700' : ''
|
||||
}`}>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Rank */}
|
||||
<div className="text-3xl font-bold w-12 text-center shrink-0">
|
||||
{index === 0 ? "🥇" : index === 1 ? "🥈" : index === 2 ? "🥉" : <span className="text-muted-foreground">{index + 1}</span>}
|
||||
</div>
|
||||
|
||||
{/* Song & Show Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="font-bold text-lg truncate">{item.song.title}</span>
|
||||
{item.performance.youtube_link && (
|
||||
<Badge variant="outline" className="text-red-500 border-red-300">
|
||||
<ExternalLink className="h-3 w-3 mr-1" />
|
||||
Video
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm text-muted-foreground mt-1">
|
||||
<span className="flex items-center gap-1">
|
||||
<Calendar className="h-4 w-4" />
|
||||
{new Date(item.show.date).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<MapPin className="h-4 w-4" />
|
||||
{item.venue.name}
|
||||
{item.venue.city && ` - ${item.venue.city}`}
|
||||
{item.venue.state && `, ${item.venue.state}`}
|
||||
</span>
|
||||
</div>
|
||||
{item.performance.notes && (
|
||||
<p className="text-xs text-primary mt-1 italic">
|
||||
{item.performance.notes}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Rating */}
|
||||
<div className="text-right shrink-0">
|
||||
<div className="flex items-center gap-1 text-yellow-600">
|
||||
<Star className="h-5 w-5 fill-current" />
|
||||
<span className="font-bold text-xl">{item.avg_score.toFixed(1)}</span>
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{item.rating_count} {item.rating_count === 1 ? 'rating' : 'ratings'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Card className="p-12 text-center">
|
||||
<CardContent>
|
||||
<Trophy className="h-16 w-16 mx-auto mb-4 text-muted-foreground/30" />
|
||||
<h2 className="text-xl font-bold">No rated performances yet</h2>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Be the first to rate a performance! Browse shows and rate your favorite jams.
|
||||
</p>
|
||||
<Link href="/shows" className="text-primary hover:underline mt-4 inline-block">
|
||||
Browse Shows →
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -45,6 +45,9 @@ export function Navbar() {
|
|||
<Link href="/songs">
|
||||
<DropdownMenuItem>Songs</DropdownMenuItem>
|
||||
</Link>
|
||||
<Link href="/performances">
|
||||
<DropdownMenuItem>Top Performances</DropdownMenuItem>
|
||||
</Link>
|
||||
<Link href="/tours">
|
||||
<DropdownMenuItem>Tours</DropdownMenuItem>
|
||||
</Link>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue