mirror of https://github.com/gabehf/Koito.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1.3 KiB
43 lines
1.3 KiB
import { useQuery } from "@tanstack/react-query"
|
|
import ArtistLinks from "./ArtistLinks"
|
|
import { getTopArtists, imageUrl, type getItemsArgs } from "api/api"
|
|
import { Link } from "react-router"
|
|
import TopListSkeleton from "./skeletons/TopListSkeleton"
|
|
import TopItemList from "./TopItemList"
|
|
|
|
interface Props {
|
|
limit: number,
|
|
period: string,
|
|
artistId?: Number
|
|
albumId?: Number
|
|
}
|
|
|
|
export default function TopArtists (props: Props) {
|
|
|
|
const { isPending, isError, data, error } = useQuery({
|
|
queryKey: ['top-artists', {limit: props.limit, period: props.period, page: 0 }],
|
|
queryFn: ({ queryKey }) => getTopArtists(queryKey[1] as getItemsArgs),
|
|
})
|
|
|
|
if (isPending) {
|
|
return (
|
|
<div className="w-[300px]">
|
|
<h2>Top Artists</h2>
|
|
<p>Loading...</p>
|
|
</div>
|
|
)
|
|
}
|
|
if (isError) {
|
|
return <p className="error">Error:{error.message}</p>
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<h2 className="hover:underline"><Link to={`/chart/top-artists?period=${props.period}`}>Top Artists</Link></h2>
|
|
<div className="max-w-[300px]">
|
|
<TopItemList type="artist" data={data} />
|
|
{data.items.length < 1 ? 'Nothing to show' : ''}
|
|
</div>
|
|
</div>
|
|
)
|
|
} |