116 lines
4.7 KiB
TypeScript
116 lines
4.7 KiB
TypeScript
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { ArrowLeft, PlayCircle, History } 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"
|
|
|
|
async function getSong(id: string) {
|
|
try {
|
|
const res = await fetch(`${getApiUrl()}/songs/${id}`, { cache: 'no-store' })
|
|
if (!res.ok) return null
|
|
return res.json()
|
|
} catch (e) {
|
|
console.error(e)
|
|
return null
|
|
}
|
|
}
|
|
|
|
export default async function SongDetailPage({ params }: { params: Promise<{ id: string }> }) {
|
|
const { id } = await params
|
|
const song = await getSong(id)
|
|
|
|
if (!song) {
|
|
notFound()
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<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">{song.title}</h1>
|
|
<p className="text-muted-foreground">{song.original_artist}</p>
|
|
{song.tags && song.tags.length > 0 && (
|
|
<div className="flex flex-wrap gap-2 mt-2">
|
|
{song.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>
|
|
)}
|
|
</div>
|
|
<SocialWrapper type="ratings">
|
|
<EntityRating entityType="song" entityId={song.id} />
|
|
</SocialWrapper>
|
|
</div>
|
|
|
|
<div className="grid gap-6 md:grid-cols-3">
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">Times Played</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold flex items-center gap-2">
|
|
<PlayCircle className="h-5 w-5 text-primary" />
|
|
{song.times_played}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">Gap (Shows)</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold flex items-center gap-2">
|
|
<History className="h-5 w-5 text-primary" />
|
|
{song.gap}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">Last Played</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">
|
|
{song.last_played ? new Date(song.last_played).toLocaleDateString() : "Never"}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Performance History</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-muted-foreground text-sm">Performance history coming soon...</p>
|
|
{/*
|
|
We need to fetch performances list here.
|
|
For now, we leave a placeholder.
|
|
*/}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="grid gap-6 md:grid-cols-2">
|
|
<SocialWrapper type="comments">
|
|
<CommentSection entityType="song" entityId={song.id} />
|
|
</SocialWrapper>
|
|
|
|
<SocialWrapper type="reviews">
|
|
<EntityReviews entityType="song" entityId={song.id} />
|
|
</SocialWrapper>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|