53 lines
2.0 KiB
TypeScript
53 lines
2.0 KiB
TypeScript
import { useQuery } from '@tanstack/react-query'
|
||
import { ErrorPanel, LoadingPanel } from '@/components/query-state'
|
||
import { Search } from 'lucide-react'
|
||
import { coverArtUrl, fetchAlbums } from '@/lib/api'
|
||
import { Link, useNavigate } from 'react-router-dom'
|
||
|
||
export function AlbumsPage() {
|
||
const navigate = useNavigate()
|
||
const albumsQuery = useQuery({
|
||
queryKey: ['albums'],
|
||
queryFn: fetchAlbums,
|
||
})
|
||
|
||
const albums = albumsQuery.data?.items ?? []
|
||
|
||
if (albumsQuery.isLoading) {
|
||
return <LoadingPanel title="Загружаю альбомы" />
|
||
}
|
||
|
||
if (albumsQuery.isError) {
|
||
return <ErrorPanel onRetry={() => void albumsQuery.refetch()} title="Не получилось загрузить альбомы" />
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<div className="flex items-center justify-end gap-3">
|
||
<button className="rounded-[10px] border border-[#24314f] bg-[#0d1628] px-5 py-3 text-base text-white" type="button">
|
||
Недавно добавленные
|
||
</button>
|
||
<button className="grid h-10 w-10 place-items-center rounded-[8px] border border-[#24314f] text-slate-400 hover:bg-[#18233a] hover:text-white" onClick={() => navigate('/search')} type="button">
|
||
<Search size={18} />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4 md:grid-cols-4 xl:grid-cols-7">
|
||
{albums.map((album) => (
|
||
<article key={album.id}>
|
||
<Link className="block aspect-square overflow-hidden rounded-[8px] bg-[#232d42]" to={`/albums/${album.id}`}>
|
||
{album.coverArtId ? (
|
||
<img alt={album.title} className="h-full w-full object-cover" src={coverArtUrl(album.id)} />
|
||
) : null}
|
||
</Link>
|
||
<Link className="mt-3 line-clamp-1 block text-[1.08rem] font-semibold text-white hover:underline" to={`/albums/${album.id}`}>
|
||
{album.title}
|
||
</Link>
|
||
<div className="text-base text-slate-400">{album.artistName}</div>
|
||
</article>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|