runfoo-org/elmeg-demo
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: show page right column with Listen On, Tour, Attendance, Rating cards
Some checks are pending
Deploy Elmeg / deploy (push) Waiting to run
Details

Browse source
This commit is contained in:
fullsizemalt 2025-12-24 13:49:45 -08:00
parent c362a66618
commit 115c411ebc
1 changed files with 91 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

153
frontend/app/shows/[slug]/page.tsx
View file

@ -93,40 +93,14 @@ export default async function ShowDetailPage({ params }: { params: Promise<{ slu
{show.tour && (
<p className="text-muted-foreground flex items-center gap-2">
<Music2 className="h-4 w-4" />
<Link href={`/tours/${show.tour.slug || show.tour.id}`} className="hover:underline">
{show.tour.name}
</Link>
</p>
)}
{/* Audio Links */}
{(show.bandcamp_link || show.nugs_link) && (
<div className="flex items-center gap-2">
{show.bandcamp_link && (
<a href={show.bandcamp_link} target="_blank" rel="noopener noreferrer">
<Button variant="outline" size="sm" className="h-7 text-xs gap-1.5">
<Disc className="h-3.5 w-3.5" />
Bandcamp
</Button>
</a>
)}
{show.nugs_link && (
<a href={show.nugs_link} target="_blank" rel="noopener noreferrer">
<Button variant="outline" size="sm" className="h-7 text-xs gap-1.5">
<PlayCircle className="h-3.5 w-3.5" />
Nugs.net
</Button>
</a>
)}
</div>
)}
</div>
</div>
</div>
<div className="flex items-center gap-4">
<ShowAttendance showId={show.id} />
<SocialWrapper type="ratings">
<EntityRating entityType="show" entityId={show.id} />
</SocialWrapper>
</div>
</div>
{show.notes && (
@ -135,38 +109,6 @@ export default async function ShowDetailPage({ params }: { params: Promise<{ slu
</div>
)}
{/* External Links */}
{(show.nugs_link || show.bandcamp_link) && (
<div className="flex flex-wrap gap-3">
{show.nugs_link && (
<a
href={show.nugs_link}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-orange-500/10 border border-orange-500/30 text-orange-600 dark:text-orange-400 hover:bg-orange-500/20 transition-colors text-sm font-medium"
>
<svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
<circle cx="12" cy="12" r="10" />
</svg>
Listen on Nugs.net
</a>
)}
{show.bandcamp_link && (
<a
href={show.bandcamp_link}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-500/10 border border-blue-500/30 text-blue-600 dark:text-blue-400 hover:bg-blue-500/20 transition-colors text-sm font-medium"
>
<svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
<path d="M0 18.75l7.437-13.5H24l-7.438 13.5H0z" />
</svg>
Listen on Bandcamp
</a>
)}
</div>
)}
<div className="grid gap-6 md:grid-cols-[2fr_1fr]">
<div className="flex flex-col gap-6">
{/* Full Show Video */}
@ -315,12 +257,13 @@ export default async function ShowDetailPage({ params }: { params: Promise<{ slu
</SocialWrapper>
</div>
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-4">
{/* Venue Info Card */}
<Card>
<CardHeader>
<CardTitle>Venue Info</CardTitle>
<CardHeader className="pb-2">
<CardTitle className="text-sm">Venue</CardTitle>
</CardHeader>
<CardContent className="space-y-2">
<CardContent className="space-y-1">
{show.venue ? (
<>
<div className="flex items-center gap-2">
@ -338,6 +281,88 @@ export default async function ShowDetailPage({ params }: { params: Promise<{ slu
)}
</CardContent>
</Card>
{/* Listen On Card */}
{(show.nugs_link || show.bandcamp_link) && (
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm">Listen On</CardTitle>
</CardHeader>
<CardContent className="space-y-2">
{show.nugs_link && (
<a
href={show.nugs_link}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-3 p-2 rounded-lg bg-orange-500/10 hover:bg-orange-500/20 border border-orange-500/20 transition-colors"
>
<PlayCircle className="h-5 w-5 text-orange-500" />
<div>
<p className="font-medium text-sm">Nugs.net</p>
<p className="text-xs text-muted-foreground">Stream or download</p>
</div>
</a>
)}
{show.bandcamp_link && (
<a
href={show.bandcamp_link}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-3 p-2 rounded-lg bg-blue-500/10 hover:bg-blue-500/20 border border-blue-500/20 transition-colors"
>
<Disc className="h-5 w-5 text-blue-500" />
<div>
<p className="font-medium text-sm">Bandcamp</p>
<p className="text-xs text-muted-foreground">Official release</p>
</div>
</a>
)}
</CardContent>
</Card>
)}
{/* Tour Info */}
{show.tour && (
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm">Tour</CardTitle>
</CardHeader>
<CardContent>
<div className="flex items-center gap-2">
<Music2 className="h-4 w-4 text-muted-foreground" />
<Link href={`/tours/${show.tour.slug || show.tour.id}`} className="font-medium hover:underline hover:text-primary">
{show.tour.name}
</Link>
</div>
</CardContent>
</Card>
)}
{/* Attendance */}
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm">I Was There</CardTitle>
</CardHeader>
<CardContent>
<ShowAttendance showId={show.id} />
</CardContent>
</Card>
{/* Rate This Show */}
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm">Rate This Show</CardTitle>
</CardHeader>
<CardContent>
<SocialWrapper type="ratings">
<EntityRating
entityType="show"
entityId={show.id}
compact={false}
/>
</SocialWrapper>
</CardContent>
</Card>
</div>
</div>
</div >