62 lines
2.4 KiB
TypeScript
62 lines
2.4 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import { getApiUrl } from "@/lib/api-config"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import Link from "next/link"
|
|
import { Music } from "lucide-react"
|
|
import { Song, PaginatedResponse } from "@/types/models"
|
|
|
|
export default function SongsPage() {
|
|
const [songs, setSongs] = useState<Song[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
fetch(`${getApiUrl()}/songs/?limit=1000`)
|
|
.then(res => res.json())
|
|
.then((data: PaginatedResponse<Song>) => {
|
|
// Handle envelope
|
|
const songData = data.data || []
|
|
// Sort alphabetically
|
|
const sorted = songData.sort((a, b) => a.title.localeCompare(b.title))
|
|
setSongs(sorted)
|
|
})
|
|
.catch(console.error)
|
|
.finally(() => setLoading(false))
|
|
}, [])
|
|
|
|
if (loading) return <div className="container py-10">Loading songs...</div>
|
|
|
|
return (
|
|
<div className="container py-10 space-y-8">
|
|
<div className="flex flex-col gap-2">
|
|
<h1 className="text-3xl font-bold tracking-tight">Songs</h1>
|
|
<p className="text-muted-foreground">
|
|
Every song played, from originals to rare covers.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{songs.map((song) => (
|
|
<Link key={song.slug} href={`/songs/${song.slug}`}>
|
|
<Card className="h-full hover:bg-accent/50 transition-colors">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Music className="h-5 w-5 text-purple-500" />
|
|
{song.title}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{song.original_artist && (
|
|
<p className="text-sm text-muted-foreground">
|
|
Original by {song.original_artist}
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|