chore: initial public commit

client/app/components/TopArtists.tsx

@@ -0,0 +1,43 @@
+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>
+    )
+}