From da6af3f3c2ac03a4afd7ec90f5e6a79d360fcb27 Mon Sep 17 00:00:00 2001
From: Francisco Pessano <franpessano1@gmail.com>
Date: Thu, 10 Oct 2024 23:49:01 -0300
Subject: [PATCH] Artists showcase

---
 src/app/_components/artist-showcase.tsx | 25 +++++++++++++++++++++++++
 src/app/_components/spotify-data.tsx    | 22 +++++-----------------
 2 files changed, 30 insertions(+), 17 deletions(-)
 create mode 100644 src/app/_components/artist-showcase.tsx

diff --git a/src/app/_components/artist-showcase.tsx b/src/app/_components/artist-showcase.tsx
new file mode 100644
index 0000000..0663c13
--- /dev/null
+++ b/src/app/_components/artist-showcase.tsx
@@ -0,0 +1,25 @@
+export default function ArtistShowcase({
+  images,
+  name,
+  id,
+}: {
+  images: { url: string }[];
+  name: string;
+  id: string;
+}) {
+  const imageSource = images[0]
+    ? images[0].url
+    : "https://via.placeholder.com/150";
+
+  return (
+    <div className="mb-2 w-56 overflow-hidden rounded-md border-2 border-slate-700">
+      <img className="h-56 w-56 object-fill" src={imageSource} alt={name} />
+      <p
+        className="w-full truncate break-all border-t-2 border-slate-300 bg-slate-200 p-2 text-center text-sm font-medium text-slate-700"
+        title={name}
+      >
+        {name}
+      </p>
+    </div>
+  );
+}
diff --git a/src/app/_components/spotify-data.tsx b/src/app/_components/spotify-data.tsx
index ae69b00..d0735b8 100644
--- a/src/app/_components/spotify-data.tsx
+++ b/src/app/_components/spotify-data.tsx
@@ -1,7 +1,9 @@
 import SpotifyWebApi from "spotify-web-api-node";
 import AlbumShowcase from "./album-showcase";
+import ArtistShowcase from "./artist-showcase";
 
 const TRACKS_LIMIT = 20;
+const ARTISTS_LIMIT = 21;
 
 export type TrackByAlbum = {
   album: {
@@ -34,7 +36,7 @@ export default async function SpotifyData({
   const albums = albumsData.body.items;
 
   const artistsData = await spotifyApi.getMyTopArtists({
-    limit: 20,
+    limit: ARTISTS_LIMIT,
     time_range: "short_term",
   });
   const artists = artistsData.body.items;
@@ -180,25 +182,11 @@ export default async function SpotifyData({
         style={{
           display: "flex",
           flexWrap: "wrap",
+          justifyContent: "space-evenly",
         }}
       >
         {artists.map((artist) => {
-          if (!artist.images[0])
-            return (
-              <img
-                key={artist.id}
-                src="https://via.placeholder.com/150"
-                alt={artist.name}
-              />
-            );
-          return (
-            <img
-              style={{ width: "150px", height: "150px" }}
-              key={artist.id}
-              src={artist.images[0].url}
-              alt={artist.name}
-            />
-          );
+          return <ArtistShowcase key={artist.id} {...artist} />;
         })}
       </div>
     </>