chore: initial public commit

client/app/components/ArtistAlbums.tsx

@@ -0,0 +1,51 @@
+import { useQuery } from "@tanstack/react-query"
+import { getTopAlbums, imageUrl, type getItemsArgs } from "api/api"
+import { Link } from "react-router"
+
+interface Props {
+    artistId: number
+    name: string
+    period: string
+}
+
+export default function ArtistAlbums({artistId, name, period}: Props) {
+
+    const { isPending, isError, data, error } = useQuery({ 
+        queryKey: ['top-albums', {limit: 99, period: "all_time", artist_id: artistId, page: 0}], 
+        queryFn: ({ queryKey }) => getTopAlbums(queryKey[1] as getItemsArgs),
+    })
+
+    if (isPending) {
+        return (
+            <div>
+                <h2>Albums From This Artist</h2>
+                <p>Loading...</p>
+            </div>
+        )
+    }
+    if (isError) {
+        return (
+            <div>
+                <h2>Albums From This Artist</h2>
+                <p className="error">Error:{error.message}</p>
+            </div>
+        )
+    }
+
+    return (
+        <div>
+            <h2>Albums featuring {name}</h2>
+        <div className="flex flex-wrap gap-8">
+            {data.items.map((item) => (
+                <Link to={`/album/${item.id}`}className="flex gap-2 items-start">
+                    <img src={imageUrl(item.image, "medium")} alt={item.title} style={{width: 130}} />
+                    <div className="w-[180px] flex flex-col items-start gap-1">
+                        <p>{item.title}</p>
+                        <p className="text-sm color-fg-secondary">{item.listen_count} play{item.listen_count > 1 ? 's' : ''}</p>
+                    </div>
+                </Link>
+            ))}
+        </div>
+        </div>
+    )
+}