feat: show artist (vertical) on venue detail page
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:
parent
f1bb59afb0
commit
4795d624cb
1 changed files with 46 additions and 1 deletions
|
|
@ -23,9 +23,49 @@ interface Show {
|
||||||
slug?: string
|
slug?: string
|
||||||
date: string
|
date: string
|
||||||
tour?: { name: string }
|
tour?: { name: string }
|
||||||
|
vertical?: { name: string; slug: string }
|
||||||
performances?: any[]
|
performances?: any[]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ... (skipping to render loop)
|
||||||
|
|
||||||
|
{
|
||||||
|
shows.map((show) => (
|
||||||
|
<Link
|
||||||
|
key={show.id}
|
||||||
|
href={show.vertical ? `/${show.vertical.slug}/shows/${show.slug}` : `/shows/${show.slug}`}
|
||||||
|
className="block group"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between p-4 rounded-lg border bg-card hover:bg-accent transition-colors">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<div className="font-semibold flex items-center gap-2">
|
||||||
|
<Calendar className="h-4 w-4 text-muted-foreground" />
|
||||||
|
<span>{new Date(show.date).toLocaleDateString(undefined, {
|
||||||
|
weekday: 'long',
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
day: 'numeric'
|
||||||
|
})}</span>
|
||||||
|
{show.vertical && (
|
||||||
|
<span className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80 ml-2">
|
||||||
|
{show.vertical.name}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{show.tour?.name && (
|
||||||
|
<div className="text-sm text-muted-foreground ml-6">
|
||||||
|
{show.tour.name}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="text-right text-sm text-muted-foreground">
|
||||||
|
{show.performances?.length || 0} songs
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
|
||||||
export default function VenueDetailPage() {
|
export default function VenueDetailPage() {
|
||||||
const params = useParams()
|
const params = useParams()
|
||||||
const slug = params.slug as string
|
const slug = params.slug as string
|
||||||
|
|
@ -138,7 +178,7 @@ export default function VenueDetailPage() {
|
||||||
{shows.length > 0 ? (
|
{shows.length > 0 ? (
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
{shows.map((show) => (
|
{shows.map((show) => (
|
||||||
<Link key={show.id} href={`/shows/${show.slug}`} className="block group">
|
<Link key={show.id} href={show.vertical ? `/${show.vertical.slug}/shows/${show.slug}` : `/shows/${show.slug}`} className="block group">
|
||||||
<div className="flex items-center justify-between p-3 rounded-md hover:bg-muted/50 transition-colors border">
|
<div className="flex items-center justify-between p-3 rounded-md hover:bg-muted/50 transition-colors border">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<Calendar className="h-4 w-4 text-muted-foreground" />
|
<Calendar className="h-4 w-4 text-muted-foreground" />
|
||||||
|
|
@ -150,6 +190,11 @@ export default function VenueDetailPage() {
|
||||||
day: "numeric"
|
day: "numeric"
|
||||||
})}
|
})}
|
||||||
</span>
|
</span>
|
||||||
|
{show.vertical && (
|
||||||
|
<span className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold bg-primary text-primary-foreground">
|
||||||
|
{show.vertical.name}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center gap-4">
|
||||||
{show.tour && (
|
{show.tour && (
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue