175 lines
8.9 KiB
TypeScript
175 lines
8.9 KiB
TypeScript
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { ArrowLeft, Calendar, MapPin, Music2 } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { CommentSection } from "@/components/social/comment-section"
|
|
import { EntityRating } from "@/components/social/entity-rating"
|
|
import { ShowAttendance } from "@/components/shows/show-attendance"
|
|
import { SocialWrapper } from "@/components/social/social-wrapper"
|
|
import { ReviewCard } from "@/components/reviews/review-card"
|
|
import { ReviewForm } from "@/components/reviews/review-form"
|
|
import { notFound } from "next/navigation"
|
|
import { SuggestNicknameDialog } from "@/components/shows/suggest-nickname-dialog"
|
|
import { EntityReviews } from "@/components/reviews/entity-reviews"
|
|
import { getApiUrl } from "@/lib/api-config"
|
|
|
|
async function getShow(id: string) {
|
|
try {
|
|
const res = await fetch(`${getApiUrl()}/shows/${id}`, { cache: 'no-store' })
|
|
if (!res.ok) return null
|
|
return res.json()
|
|
} catch (e) {
|
|
console.error(e)
|
|
return null
|
|
}
|
|
}
|
|
|
|
export default async function ShowDetailPage({ params }: { params: Promise<{ id: string }> }) {
|
|
const { id } = await params
|
|
const show = await getShow(id)
|
|
|
|
if (!show) {
|
|
notFound()
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<Link href="/archive">
|
|
<Button variant="ghost" size="icon">
|
|
<ArrowLeft className="h-4 w-4" />
|
|
</Button>
|
|
</Link>
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight">
|
|
{new Date(show.date).toLocaleDateString()}
|
|
{show.venue && (
|
|
<span className="font-normal text-muted-foreground ml-2">
|
|
- {show.venue.name}, {show.venue.city}, {show.venue.state}
|
|
</span>
|
|
)}
|
|
</h1>
|
|
{show.tags && show.tags.length > 0 && (
|
|
<div className="flex flex-wrap gap-2 mt-1">
|
|
{show.tags.map((tag: any) => (
|
|
<span key={tag.id} className="bg-secondary text-secondary-foreground px-2 py-0.5 rounded-full text-xs font-medium">
|
|
#{tag.name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
{show.tour && (
|
|
<p className="text-muted-foreground flex items-center gap-2 mt-2">
|
|
<Music2 className="h-4 w-4" />
|
|
{show.tour.name}
|
|
</p>
|
|
)}
|
|
</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 && (
|
|
<div className="bg-muted/50 p-4 rounded-lg border text-sm italic">
|
|
Note: {show.notes}
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid gap-6 md:grid-cols-[2fr_1fr]">
|
|
<div className="flex flex-col gap-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Setlist</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{show.performances && show.performances.length > 0 ? (
|
|
<div className="space-y-2">
|
|
{show.performances.map((perf: any) => (
|
|
<div key={perf.id} className="flex items-center justify-between group py-1 hover:bg-muted/50 rounded px-2 -mx-2">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-muted-foreground w-6 text-right text-sm font-mono">{perf.position}.</span>
|
|
<div className="font-medium">
|
|
{perf.song?.title || "Unknown Song"}
|
|
{perf.segue && <span className="ml-1 text-muted-foreground">></span>}
|
|
</div>
|
|
|
|
{/* Nicknames */}
|
|
{perf.nicknames && perf.nicknames.length > 0 && (
|
|
<div className="flex gap-1 ml-2">
|
|
{perf.nicknames.map((nick: any) => (
|
|
<span key={nick.id} className="text-xs bg-yellow-100 text-yellow-800 px-1.5 py-0.5 rounded-full border border-yellow-200" title={nick.description}>
|
|
"{nick.nickname}"
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Suggest Nickname Button */}
|
|
<div className="opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<SuggestNicknameDialog
|
|
performanceId={perf.id}
|
|
songTitle={perf.song?.title || "Song"}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Rating Column */}
|
|
<div className="flex items-center">
|
|
<SocialWrapper type="ratings">
|
|
<EntityRating
|
|
entityType="performance"
|
|
entityId={perf.id}
|
|
compact={true}
|
|
/>
|
|
</SocialWrapper>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-muted-foreground text-sm">No setlist data available.</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<SocialWrapper type="comments">
|
|
<CommentSection entityType="show" entityId={show.id} />
|
|
</SocialWrapper>
|
|
|
|
<SocialWrapper type="reviews">
|
|
<EntityReviews entityType="show" entityId={show.id} />
|
|
</SocialWrapper>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Venue Info</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-2">
|
|
{show.venue ? (
|
|
<>
|
|
<div className="flex items-center gap-2">
|
|
<MapPin className="h-4 w-4 text-muted-foreground" />
|
|
<span className="font-medium">{show.venue.name}</span>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground pl-6">
|
|
{show.venue.city}, {show.venue.state} {show.venue.country}
|
|
</p>
|
|
</>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground">Unknown Venue</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|