171 lines
8 KiB
TypeScript
171 lines
8 KiB
TypeScript
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { ArrowLeft, Calendar, MapPin, Hash } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { notFound } from "next/navigation"
|
|
import { getApiUrl } from "@/lib/api-config"
|
|
import { CommentSection } from "@/components/social/comment-section"
|
|
import { EntityRating } from "@/components/social/entity-rating"
|
|
import { EntityReviews } from "@/components/reviews/entity-reviews"
|
|
import { SocialWrapper } from "@/components/social/social-wrapper"
|
|
|
|
interface ShowWithVenue {
|
|
id: number
|
|
slug: string
|
|
date: string
|
|
venue?: {
|
|
name: string
|
|
city?: string
|
|
state?: string
|
|
}
|
|
}
|
|
|
|
async function getTour(id: string) {
|
|
try {
|
|
const res = await fetch(`${getApiUrl()}/tours/${id}`, { cache: 'no-store' })
|
|
if (!res.ok) return null
|
|
return res.json()
|
|
} catch (e) {
|
|
console.error(e)
|
|
return null
|
|
}
|
|
}
|
|
|
|
async function getTourShows(id: string) {
|
|
try {
|
|
const res = await fetch(`${getApiUrl()}/shows/?tour_id=${id}`, { cache: 'no-store' })
|
|
if (!res.ok) return []
|
|
return res.json()
|
|
} catch (e) {
|
|
console.error(e)
|
|
return []
|
|
}
|
|
}
|
|
|
|
export default async function TourDetailPage({ params }: { params: Promise<{ slug: string }> }) {
|
|
const { slug } = await params
|
|
const tour = await getTour(slug)
|
|
|
|
if (!tour) {
|
|
notFound()
|
|
}
|
|
|
|
const shows = await getTourShows(tour.id)
|
|
|
|
// Calculate stats
|
|
const uniqueStates = [...new Set(shows.filter((s: ShowWithVenue) => s.venue?.state).map((s: ShowWithVenue) => s.venue!.state))]
|
|
const uniqueCities = [...new Set(shows.filter((s: ShowWithVenue) => s.venue?.city).map((s: ShowWithVenue) => s.venue!.city))]
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<div className="flex items-center gap-4 justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<Link href="/tours">
|
|
<Button variant="ghost" size="icon">
|
|
<ArrowLeft className="h-4 w-4" />
|
|
</Button>
|
|
</Link>
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight">{tour.name}</h1>
|
|
<p className="text-muted-foreground flex items-center gap-2">
|
|
<Calendar className="h-4 w-4" />
|
|
{tour.start_date ? new Date(tour.start_date).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "Unknown"}
|
|
{tour.end_date && ` - ${new Date(tour.end_date).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })}`}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<SocialWrapper type="ratings">
|
|
<EntityRating entityType="tour" entityId={tour.id} />
|
|
</SocialWrapper>
|
|
</div>
|
|
|
|
<div className="grid gap-6 md:grid-cols-[2fr_1fr]">
|
|
<div className="flex flex-col gap-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Shows on {tour.name}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{shows.length > 0 ? (
|
|
<div className="space-y-2">
|
|
{[...shows]
|
|
.sort((a: ShowWithVenue, b: ShowWithVenue) => new Date(a.date).getTime() - new Date(b.date).getTime())
|
|
.map((show: ShowWithVenue) => (
|
|
<Link key={show.id} href={`/shows/${show.slug}`} className="block group">
|
|
<div className="flex items-center justify-between p-3 rounded-md hover:bg-muted/50 transition-colors border-b last:border-b-0">
|
|
<div className="flex items-center gap-3">
|
|
<Calendar className="h-4 w-4 text-muted-foreground" />
|
|
<span className="font-medium group-hover:underline">
|
|
{new Date(show.date).toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" })}
|
|
</span>
|
|
</div>
|
|
{show.venue && (
|
|
<span className="text-sm text-muted-foreground">
|
|
{show.venue.name}, {show.venue.city}{show.venue.state ? `, ${show.venue.state}` : ""}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-muted-foreground text-sm">No shows found for this tour.</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<SocialWrapper type="comments">
|
|
<CommentSection entityType="tour" entityId={tour.id} />
|
|
</SocialWrapper>
|
|
|
|
<SocialWrapper type="reviews">
|
|
<EntityReviews entityType="tour" entityId={tour.id} />
|
|
</SocialWrapper>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-6">
|
|
{/* Tour Stats */}
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-base">Tour Stats</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-muted-foreground flex items-center gap-2">
|
|
<Hash className="h-4 w-4" /> Shows
|
|
</span>
|
|
<Badge variant="secondary">{shows.length}</Badge>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-muted-foreground flex items-center gap-2">
|
|
<MapPin className="h-4 w-4" /> Cities
|
|
</span>
|
|
<Badge variant="outline">{uniqueCities.length}</Badge>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-muted-foreground flex items-center gap-2">
|
|
<MapPin className="h-4 w-4" /> States
|
|
</span>
|
|
<Badge variant="outline">{uniqueStates.length}</Badge>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Tour Notes */}
|
|
{tour.notes && (
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-base">Notes</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-muted-foreground italic">{tour.notes}</p>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|