fix(nav): add /bands discovery page, fix Browse links to unified routes
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
0f571864e0
commit
e68486ddd2
3 changed files with 131 additions and 1 deletions
21
frontend/app/bands/page.tsx
Normal file
21
frontend/app/bands/page.tsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import { Metadata } from "next"
|
||||
import { BandsGrid } from "@/components/bands/bands-grid"
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Bands | Fediversion",
|
||||
description: "Browse all bands in the Fediversion archive"
|
||||
}
|
||||
|
||||
export default function BandsPage() {
|
||||
return (
|
||||
<div className="container max-w-6xl py-8 space-y-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Bands</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Select a band to explore their archive of shows, songs, and performances.
|
||||
</p>
|
||||
</div>
|
||||
<BandsGrid />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
108
frontend/components/bands/bands-grid.tsx
Normal file
108
frontend/components/bands/bands-grid.tsx
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
"use client"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import Link from "next/link"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { getApiUrl } from "@/lib/api-config"
|
||||
import { Loader2, ChevronRight, Music, Calendar, MapPin, ListMusic } from "lucide-react"
|
||||
|
||||
interface Vertical {
|
||||
id: number
|
||||
name: string
|
||||
slug: string
|
||||
description: string | null
|
||||
color: string | null
|
||||
show_count?: number
|
||||
song_count?: number
|
||||
venue_count?: number
|
||||
}
|
||||
|
||||
export function BandsGrid() {
|
||||
const [verticals, setVerticals] = useState<Vertical[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchVerticals() {
|
||||
try {
|
||||
const res = await fetch(`${getApiUrl()}/verticals`)
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
setVerticals(data)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch verticals", error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
fetchVerticals()
|
||||
}, [])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[300px]">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{verticals.map((vertical) => (
|
||||
<Link key={vertical.id} href={`/${vertical.slug}`} className="group">
|
||||
<Card className="h-full transition-all duration-200 hover:scale-[1.02] hover:shadow-lg hover:border-primary/50">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="w-12 h-12 rounded-lg flex items-center justify-center text-white font-bold text-lg"
|
||||
style={{ backgroundColor: vertical.color || '#3B82F6' }}
|
||||
>
|
||||
{vertical.name.substring(0, 2).toUpperCase()}
|
||||
</div>
|
||||
<CardTitle className="text-xl group-hover:text-primary transition-colors">
|
||||
{vertical.name}
|
||||
</CardTitle>
|
||||
</div>
|
||||
<ChevronRight className="h-5 w-5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{vertical.description && (
|
||||
<p className="text-sm text-muted-foreground line-clamp-2 mb-4">
|
||||
{vertical.description}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex flex-wrap gap-3 text-xs text-muted-foreground">
|
||||
<Link
|
||||
href={`/${vertical.slug}/shows`}
|
||||
className="flex items-center gap-1 px-2 py-1 rounded-full bg-muted hover:bg-primary/10 hover:text-primary transition-colors"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Calendar className="h-3 w-3" />
|
||||
Shows
|
||||
</Link>
|
||||
<Link
|
||||
href={`/${vertical.slug}/songs`}
|
||||
className="flex items-center gap-1 px-2 py-1 rounded-full bg-muted hover:bg-primary/10 hover:text-primary transition-colors"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<ListMusic className="h-3 w-3" />
|
||||
Songs
|
||||
</Link>
|
||||
<Link
|
||||
href={`/${vertical.slug}/venues`}
|
||||
className="flex items-center gap-1 px-2 py-1 rounded-full bg-muted hover:bg-primary/10 hover:text-primary transition-colors"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<MapPin className="h-3 w-3" />
|
||||
Venues
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -17,6 +17,7 @@ import { useAuth } from "@/contexts/auth-context"
|
|||
import { useVertical } from "@/contexts/vertical-context"
|
||||
|
||||
const browseLinks = [
|
||||
{ href: "/bands", label: "Bands" },
|
||||
{ href: "/shows", label: "Shows" },
|
||||
{ href: "/venues", label: "Venues" },
|
||||
{ href: "/songs", label: "Songs" },
|
||||
|
|
@ -55,7 +56,7 @@ export function Navbar() {
|
|||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start">
|
||||
{browseLinks.map((link) => (
|
||||
<Link key={link.href} href={getVerticalLink(link.href)}>
|
||||
<Link key={link.href} href={link.href}>
|
||||
<DropdownMenuItem>{link.label}</DropdownMenuItem>
|
||||
</Link>
|
||||
))}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue