Profile show

src/app/_components/h2.tsx

@@ -0,0 +1,15 @@
+export function TypographyH2({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <h2
+      className={`scroll-m-20 border-b border-none pb-2 text-3xl font-semibold tracking-tight first:mt-0 ${className}`}
+    >
+      {children}
+    </h2>
+  );
+}

src/app/_components/showcase.tsx

@@ -4,11 +4,15 @@ import React, { useState } from "react";
 import Switch from "./switch";
 import AlbumShowcase from "./album-showcase";
 import ArtistShowcase from "./artist-showcase";
+import UserShowcase from "./user-showcase";
+import { TypographyH2 } from "./h2";
 
 export function Showcase({
+  userData,
   tracksByAlbum,
   artists,
 }: {
+  userData: Record<string, any>;
   tracksByAlbum: Record<string, any>;
   artists: any[];
 }) {
@@ -24,7 +28,8 @@ export function Showcase({
         </label>
         <Switch isChecked={spookify} setIsChecked={setSpookify} />
       </div>
-      <h3>Tracks by album</h3>
+      <UserShowcase spookify={spookify} {...userData} />
+      <TypographyH2 className="justify-start">Tracks by album</TypographyH2>
       {Object.values(tracksByAlbum)
         .sort((a, b) => b.position - a.position)
         .map((album, index) => {

src/app/_components/spotify-data.tsx

@@ -29,19 +29,19 @@ export default async function SpotifyData({
   });
   spotifyApi.setAccessToken(accessToken);
 
-  const albumsData = await spotifyApi.getMySavedAlbums({ limit: 20 });
+  const [artistsData, tracksData, userData] = await Promise.all([
-  const albums = albumsData.body.items;
+    spotifyApi.getMyTopArtists({
+      limit: FETCH_ARTISTS_LIMIT,
+      time_range: "short_term",
+    }),
+    spotifyApi.getMyTopTracks({
+      limit: FETCH_TRACKS_LIMIT,
+      time_range: "short_term",
+    }),
+    spotifyApi.getMe(),
+  ]);
 
-  const artistsData = await spotifyApi.getMyTopArtists({
-    limit: FETCH_ARTISTS_LIMIT,
-    time_range: "short_term",
-  });
   const artists = artistsData.body.items;
-
-  const tracksData = await spotifyApi.getMyTopTracks({
-    limit: FETCH_TRACKS_LIMIT,
-    time_range: "short_term",
-  });
   const tracks = tracksData.body.items.map((track, i) => ({
     ...track,
     position: i + 1,
@@ -184,7 +184,11 @@ export default async function SpotifyData({
         })}
       </div> */}
 
-      <Showcase tracksByAlbum={tracksByAlbum} artists={artists} />
+      <Showcase
+        userData={userData?.body}
+        tracksByAlbum={tracksByAlbum}
+        artists={artists}
+      />
     </>
   );
 }

src/app/_components/user-showcase.tsx

@@ -0,0 +1,29 @@
+"use client";
+import { TypographyH1 } from "./h1";
+import { TypographyH2 } from "./h2";
+
+export default function UserShowcase({
+  display_name,
+  spookify,
+  images,
+}: {
+  display_name: string;
+  spookify: boolean;
+  images: { url: string }[];
+}) {
+  const imageSource = images && images[0];
+  return (
+    <div className="flex">
+      <img
+        className="h-16 w-16 rounded-full"
+        src={imageSource?.url || "https://via.placeholder.com/150"}
+        alt={display_name}
+      />
+      <div className="ml-2 flex flex-col justify-center">
+        <TypographyH2 className="font-bold">
+          {display_name} {spookify && "Spooky"} Showcase
+        </TypographyH2>
+      </div>
+    </div>
+  );
+}