refactor: show page right column with Listen On, Tour, Attendance, Rating cards
Some checks are pending
Deploy Elmeg / deploy (push) Waiting to run
Some checks are pending
Deploy Elmeg / deploy (push) Waiting to run
This commit is contained in:
fullsizemalt
parent
c362a66618
commit
115c411ebc
1 changed files with 91 additions and 66 deletions
|
|
@ -93,40 +93,14 @@ export default async function ShowDetailPage({ params }: { params: Promise<{ slu
|
||||||
{show.tour && (
|
{show.tour && (
|
||||||
<p className="text-muted-foreground flex items-center gap-2">
|
<p className="text-muted-foreground flex items-center gap-2">
|
||||||
<Music2 className="h-4 w-4" />
|
<Music2 className="h-4 w-4" />
|
||||||
|
<Link href={`/tours/${show.tour.slug || show.tour.id}`} className="hover:underline">
|
||||||
{show.tour.name}
|
{show.tour.name}
|
||||||
|
</Link>
|
||||||
</p>
|
</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>
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
{show.notes && (
|
{show.notes && (
|
||||||
|
|
@ -135,38 +109,6 @@ export default async function ShowDetailPage({ params }: { params: Promise<{ slu
|
||||||
</div>
|
</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="grid gap-6 md:grid-cols-[2fr_1fr]">
|
||||||
<div className="flex flex-col gap-6">
|
<div className="flex flex-col gap-6">
|
||||||
{/* Full Show Video */}
|
{/* Full Show Video */}
|
||||||
|
|
@ -315,12 +257,13 @@ export default async function ShowDetailPage({ params }: { params: Promise<{ slu
|
||||||
</SocialWrapper>
|
</SocialWrapper>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col gap-6">
|
<div className="flex flex-col gap-4">
|
||||||
|
{/* Venue Info Card */}
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader className="pb-2">
|
||||||
<CardTitle>Venue Info</CardTitle>
|
<CardTitle className="text-sm">Venue</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-2">
|
<CardContent className="space-y-1">
|
||||||
{show.venue ? (
|
{show.venue ? (
|
||||||
<>
|
<>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
|
|
@ -338,8 +281,90 @@ export default async function ShowDetailPage({ params }: { params: Promise<{ slu
|
||||||
)}
|
)}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</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>
|
</div>
|
||||||
</div>
|
</div >
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue