54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import { GenreHeader } from '@/components/GenreHeader'
|
|
import { SongCard } from '@/components/SongCard'
|
|
|
|
interface PageProps {
|
|
params: Promise<{ slug: string }>
|
|
}
|
|
|
|
async function getGenreSongs(slug: string) {
|
|
const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/discover/genres/${slug}`, {
|
|
cache: 'no-store',
|
|
})
|
|
if (!res.ok) throw new Error('Genre not found')
|
|
const data = await res.json()
|
|
return data
|
|
}
|
|
|
|
export default async function GenrePage({ params }: PageProps) {
|
|
const { slug } = await params
|
|
const { genre, songs } = await getGenreSongs(slug)
|
|
|
|
return (
|
|
<main className="min-h-screen bg-zinc-950">
|
|
<GenreHeader
|
|
name={genre.name}
|
|
description={genre.description}
|
|
songCount={songs?.length || 0}
|
|
/>
|
|
|
|
<div className="max-w-7xl mx-auto px-4 py-8">
|
|
{songs && songs.length > 0 ? (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
|
{songs.map((song: any) => (
|
|
<SongCard
|
|
key={song.id}
|
|
id={song.id}
|
|
title={song.title}
|
|
artistName={song.artist?.name || 'Unknown Artist'}
|
|
coverUrl={song.coverUrl || song.album?.coverUrl}
|
|
duration={song.duration || 0}
|
|
plays={song.plays}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-16">
|
|
<p className="text-xl text-zinc-400 mb-4">No songs found in this genre</p>
|
|
<p className="text-zinc-500">Check back later for new releases</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|