feat(bands): redesign band landing page with elmeg-style layout
Some checks failed
Deploy Fediversion / deploy (push) Failing after 1s
Some checks failed
Deploy Fediversion / deploy (push) Failing after 1s
This commit is contained in:
fullsizemalt
parent
d4f6f60df6
commit
1d9e56a2da
1 changed files with 174 additions and 28 deletions
|
|
@ -1,5 +1,10 @@
|
|||
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, Play } from "lucide-react"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
interface Props {
|
||||
params: Promise<{ vertical: string }>
|
||||
|
|
@ -11,6 +16,30 @@ export function generateStaticParams() {
|
|||
}))
|
||||
}
|
||||
|
||||
async function getRecentShows(verticalSlug: string) {
|
||||
try {
|
||||
const res = await fetch(`${getApiUrl()}/shows?vertical=${verticalSlug}&limit=8&status=past`, {
|
||||
next: { revalidate: 60 }
|
||||
})
|
||||
if (!res.ok) return []
|
||||
return res.json()
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
async function getTopSongs(verticalSlug: string) {
|
||||
try {
|
||||
const res = await fetch(`${getApiUrl()}/songs?vertical=${verticalSlug}&limit=5&sort=times_played`, {
|
||||
next: { revalidate: 60 }
|
||||
})
|
||||
if (!res.ok) return []
|
||||
return res.json()
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
export default async function VerticalPage({ params }: Props) {
|
||||
const { vertical: verticalSlug } = await params
|
||||
const vertical = VERTICALS.find((v) => v.slug === verticalSlug)
|
||||
|
|
@ -19,39 +48,156 @@ export default async function VerticalPage({ params }: Props) {
|
|||
notFound()
|
||||
}
|
||||
|
||||
const [recentShows, topSongs] = await Promise.all([
|
||||
getRecentShows(verticalSlug),
|
||||
getTopSongs(verticalSlug)
|
||||
])
|
||||
|
||||
const navCards = [
|
||||
{ href: `/${verticalSlug}/shows`, icon: Calendar, title: "Shows", desc: "Browse the complete archive" },
|
||||
{ href: `/${verticalSlug}/venues`, icon: Building, title: "Venues", desc: "Find your favorite spots" },
|
||||
{ href: `/${verticalSlug}/songs`, icon: Music, title: "Songs", desc: "Explore the catalog" },
|
||||
{ href: `/${verticalSlug}/performances`, icon: Trophy, title: "Top Performances", desc: "Highest rated jams" },
|
||||
{ href: `/leaderboards?band=${verticalSlug}`, icon: Trophy, title: "Leaderboards", desc: "Top rated everything" },
|
||||
{ href: `/${verticalSlug}/tours`, icon: Ticket, title: "Tours", desc: "Browse by tour" },
|
||||
{ href: `/videos?band=${verticalSlug}`, icon: Video, title: "Videos", desc: "Watch full shows and songs" },
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<div className="text-center space-y-4">
|
||||
<h1 className="text-4xl font-bold">{vertical.name}</h1>
|
||||
<p className="text-muted-foreground max-w-2xl mx-auto">
|
||||
Explore setlists, rate performances, and connect with the {vertical.name} community.
|
||||
<div className="space-y-12 pb-12">
|
||||
{/* Hero Section */}
|
||||
<section className="relative py-16 md:py-24 text-center space-y-6 bg-gradient-to-b from-primary/5 to-transparent">
|
||||
<h1 className="text-5xl md:text-6xl font-bold tracking-tight bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
|
||||
{vertical.name}
|
||||
</h1>
|
||||
<p className="text-xl text-muted-foreground max-w-2xl mx-auto px-4">
|
||||
A comprehensive community-driven archive for {vertical.name} history.
|
||||
<br className="hidden sm:block" />
|
||||
Discover shows, share ratings, and explore the music together.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4 pt-4">
|
||||
<Link href={`/${verticalSlug}/performances`}>
|
||||
<Button size="lg" className="gap-2">
|
||||
<Trophy className="h-4 w-4" />
|
||||
Top Performances
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={`/${verticalSlug}/shows`}>
|
||||
<Button size="lg" variant="outline" className="gap-2">
|
||||
<Calendar className="h-4 w-4" />
|
||||
Browse Shows
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="container max-w-6xl space-y-12 px-4">
|
||||
{/* Recent Shows */}
|
||||
{recentShows.length > 0 && (
|
||||
<section 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`} className="text-sm text-muted-foreground hover:text-primary transition-colors flex items-center gap-1">
|
||||
View all shows <ChevronRight className="h-4 w-4" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{recentShows.slice(0, 8).map((show: any) => (
|
||||
<Link
|
||||
key={show.id}
|
||||
href={`/${verticalSlug}/shows/${show.slug}`}
|
||||
className="group"
|
||||
>
|
||||
<Card className="h-full transition-all duration-200 hover:scale-[1.02] hover:shadow-lg hover:border-primary/50">
|
||||
<CardContent className="p-4 space-y-2">
|
||||
<div className="text-sm font-medium text-primary">
|
||||
{new Date(show.date).toLocaleDateString('en-US', {
|
||||
weekday: 'short',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</div>
|
||||
<div className="font-semibold group-hover:text-primary transition-colors line-clamp-1">
|
||||
{show.venue?.name || "Unknown Venue"}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground flex items-center gap-1">
|
||||
<MapPin className="h-3 w-3" />
|
||||
{show.venue?.city}, {show.venue?.state || show.venue?.country}
|
||||
</div>
|
||||
{show.tour?.name && (
|
||||
<div className="text-xs text-muted-foreground/80 pt-1">
|
||||
{show.tour.name}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Top Songs */}
|
||||
{topSongs.length > 0 && (
|
||||
<section className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-2xl font-bold tracking-tight">Top Songs</h2>
|
||||
<Link href={`/${verticalSlug}/songs`} className="text-sm text-muted-foreground hover:text-primary transition-colors flex items-center gap-1">
|
||||
All songs <ChevronRight className="h-4 w-4" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{topSongs.slice(0, 5).map((song: any, index: number) => (
|
||||
<Link
|
||||
key={song.id}
|
||||
href={`/${verticalSlug}/songs/${song.slug}`}
|
||||
className="group"
|
||||
>
|
||||
<div className="flex items-center gap-4 p-3 rounded-lg border bg-card hover:bg-accent/50 transition-all duration-200">
|
||||
<div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-sm font-bold text-primary">
|
||||
{index + 1}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-medium group-hover:text-primary transition-colors truncate">
|
||||
{song.title}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground whitespace-nowrap">
|
||||
{song.times_played || song.performance_count || 0} performances
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Navigation Cards */}
|
||||
<section className="space-y-4">
|
||||
<h2 className="text-2xl font-bold tracking-tight">Explore</h2>
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{navCards.map((card) => (
|
||||
<Link key={card.href} href={card.href} className="group">
|
||||
<Card className="h-full transition-all duration-200 hover:scale-[1.02] hover:shadow-lg hover:border-primary/50">
|
||||
<CardContent className="p-6 flex items-start gap-4">
|
||||
<div className="p-3 rounded-lg bg-primary/10 text-primary group-hover:bg-primary group-hover:text-primary-foreground transition-colors">
|
||||
<card.icon className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold group-hover:text-primary transition-colors">
|
||||
{card.title}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{card.desc}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<a
|
||||
href={`/${vertical.slug}/shows`}
|
||||
className="block p-6 rounded-lg border bg-card hover:bg-accent transition-colors"
|
||||
>
|
||||
<h2 className="text-xl font-semibold mb-2">Shows</h2>
|
||||
<p className="text-muted-foreground">Browse all concerts and setlists</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href={`/${vertical.slug}/songs`}
|
||||
className="block p-6 rounded-lg border bg-card hover:bg-accent transition-colors"
|
||||
>
|
||||
<h2 className="text-xl font-semibold mb-2">Songs</h2>
|
||||
<p className="text-muted-foreground">Explore the catalog and stats</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href={`/${vertical.slug}/venues`}
|
||||
className="block p-6 rounded-lg border bg-card hover:bg-accent transition-colors"
|
||||
>
|
||||
<h2 className="text-xl font-semibold mb-2">Venues</h2>
|
||||
<p className="text-muted-foreground">See where they've played</p>
|
||||
</a>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue