96 lines
3.1 KiB
TypeScript
96 lines
3.1 KiB
TypeScript
'use client'
|
|
|
|
import { SongCard, SongCardProps } from './SongCard'
|
|
import { AlbumCard, AlbumCardProps } from './AlbumCard'
|
|
import { ArtistCard, ArtistCardProps } from './ArtistCard'
|
|
|
|
export interface SearchResultsProps {
|
|
query: string
|
|
songs?: SongCardProps[]
|
|
albums?: AlbumCardProps[]
|
|
artists?: ArtistCardProps[]
|
|
isLoading?: boolean
|
|
}
|
|
|
|
export function SearchResults({
|
|
query,
|
|
songs = [],
|
|
albums = [],
|
|
artists = [],
|
|
isLoading = false
|
|
}: SearchResultsProps) {
|
|
const hasResults = songs.length > 0 || albums.length > 0 || artists.length > 0
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center py-20">
|
|
<div className="w-16 h-16 border-4 border-purple-500 border-t-transparent rounded-full animate-spin mb-4" />
|
|
<p className="text-zinc-400">Searching...</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (!hasResults) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center py-20 text-center">
|
|
<svg className="w-24 h-24 text-zinc-700 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<h3 className="text-xl font-semibold text-white mb-2">No results found</h3>
|
|
<p className="text-zinc-400 max-w-md">
|
|
We couldn't find anything for "{query}". Try different keywords or browse by genre.
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-10">
|
|
{/* Songs Section */}
|
|
{songs.length > 0 && (
|
|
<section>
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-2xl font-bold text-white">Songs</h2>
|
|
<span className="text-sm text-zinc-400">{songs.length} results</span>
|
|
</div>
|
|
<div className="space-y-2">
|
|
{songs.map(song => (
|
|
<SongCard key={song.id} {...song} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* Artists Section */}
|
|
{artists.length > 0 && (
|
|
<section>
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-2xl font-bold text-white">Artists</h2>
|
|
<span className="text-sm text-zinc-400">{artists.length} results</span>
|
|
</div>
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
|
{artists.map(artist => (
|
|
<ArtistCard key={artist.id} {...artist} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* Albums Section */}
|
|
{albums.length > 0 && (
|
|
<section>
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-2xl font-bold text-white">Albums</h2>
|
|
<span className="text-sm text-zinc-400">{albums.length} results</span>
|
|
</div>
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
|
{albums.map(album => (
|
|
<AlbumCard key={album.id} {...album} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|