66 lines
2.6 KiB
TypeScript
66 lines
2.6 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
|
|
import { Calendar, MapPin, Ticket } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { getApiUrl } from "@/lib/api-config"
|
|
import { Skeleton } from "@/components/ui/skeleton"
|
|
import { Badge } from "@/components/ui/badge"
|
|
|
|
export function RecommendedShows() {
|
|
const [shows, setShows] = useState<any[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
const token = localStorage.getItem("token")
|
|
if (!token) return
|
|
|
|
fetch(`${getApiUrl()}/recommendations/shows/recent?limit=4`, {
|
|
headers: { Authorization: `Bearer ${token}` }
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => setShows(data))
|
|
.catch(err => console.error(err))
|
|
.finally(() => setLoading(false))
|
|
}, [])
|
|
|
|
if (loading) return <Skeleton className="h-48 w-full" />
|
|
|
|
if (shows.length === 0) return null
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-lg flex items-center gap-2">
|
|
<Ticket className="h-5 w-5 text-primary" />
|
|
Recommended Shows
|
|
</CardTitle>
|
|
<CardDescription>Recent shows from bands you follow</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
{shows.map((show) => (
|
|
<div key={show.id} className="flex items-start justify-between border-b last:border-0 pb-3 last:pb-0">
|
|
<div className="space-y-1">
|
|
<Link
|
|
href={`/shows/${show.id}`} // Using ID as slug fallback for now
|
|
className="font-medium hover:underline text-primary"
|
|
>
|
|
{show.date}
|
|
</Link>
|
|
<div className="text-sm text-muted-foreground flex items-center gap-2">
|
|
<MapPin className="h-3 w-3" />
|
|
{show.venue_name}
|
|
</div>
|
|
</div>
|
|
<Badge variant="outline" className="text-xs">
|
|
{show.vertical_name}
|
|
</Badge>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|