Artists showcase

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>
+  );
+}

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 <ArtistShowcase key={artist.id} {...artist} />;
-            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}
-            />
-          );
         })}
       </div>
     </>