new music card

azpha · Mar 24, 2024 · 5acf3b3 · 5acf3b3
1 parent 41ec955
commit 5acf3b3
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 87 deletions.
diff --git a/src/components/BlogCard.tsx b/src/components/BlogCard.tsx
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
diff --git a/src/components/MusicCard.tsx b/src/components/MusicCard.tsx
@@ -3,28 +3,47 @@ import Link from "next/link";
 import { api } from "@/utils/api";
 
 export default function MusicCard() {
-    const musicFetch = api.misc.song.useQuery()
+    const {data: musicData, fetchStatus} = api.misc.song.useQuery()
 
-    if (musicFetch.data) {
-        return (
-            <Link href="https://last.fm/user/lulawex" target="_blank">
-                <div className="bg-white max-w-xs text-black rounded-sm leading-tight">
-                    <div className="flex items-start p-2">
-                        <div className="flex-none">
-                            <Image 
-                                src={musicFetch.data.track.image[3]?.["#text"] ?? ""}
-                                alt="Cover Art" 
-                                width="50"
-                                height="50"
-                            />
-                        </div>
-                        <div className="flex flex-col ml-2 pt-1.5">
-                            <h1 className="text-sm truncate">{musicFetch.data.track.name}</h1>
-                            <p>{musicFetch.data.track.artist["#text"]}</p>
-                        </div>
-                    </div>
-                </div>
+    return (
+        <div className="bg-white text-black max-w-fit mx-auto p-4">
+            <h1 className="text-2xl font-bold inline">Listening To</h1>
+
+            {/* link to lastfm */}
+            <Link 
+                href="https://last.fm/user/lulawex"
+                target="_blank"
+                className="opacity-75 underline font-bold text-sm ml-2 hover:text-zinc-600"
+            >
+                Powered by Last.fm
             </Link>
-        )
-    }
+
+            {
+                fetchStatus !== "fetching" ?
+                    <div className="space-y-2">
+                        {
+                            musicData?.track.map((v,k) => {
+                                return <div key={k}>
+                                    <Image 
+                                        src={v.image[0]?.["#text"] ?? "https://storage.thatalex.dev/content/pfp.jpg"}
+                                        width="50"
+                                        height="50"
+                                        alt={`${v.name} Cover Art`}
+                                        className="inline mr-2"
+                                    />
+                                    <div className="inline-block align-middle">
+                                        <Link href={v.url} target="_blank">
+                                            <h1 className="font-bold w-52 truncate hover:underline">{v.name}</h1>
+                                        </Link>
+                                        <p className="opacity-75">{v.artist["#text"]}</p>
+                                    </div>
+                                </div>
+                            })
+                        }
+                    </div>
+                :
+                    <p className="font-bold">Hold tight, fetching..</p>
+            }
+        </div>
+    )
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,4 +1,5 @@
 import RootLayout from "@/components/RootLayout";
+import MusicCard from "@/components/MusicCard";
 import Link from 'next/link';
 import { Cli } from "grommet-icons";
 
@@ -51,6 +52,10 @@ export default function Home() {
                 </div>
 
                 <hr className="h-px my-2 bg-gray-200 border-0 w-1/2 mx-auto dark:bg-gray-700" />
+
+                <div className="my-4">
+                    <MusicCard />
+                </div>
             </div>
         </RootLayout>
     )

diff --git a/src/server/api/routers/misc.ts b/src/server/api/routers/misc.ts
@@ -10,30 +10,34 @@ type ImageListType = {
     "#text": string
 }
 
-type LastTrackType = {
+type TrackResponseType = {
     status: number,
-    track: {
-        "@attr": object,
-        "album": {
-            "mbid": string,
-            "#text": string
-        },
-        "artist": {
-            "mbid": string,
-            "#text": string,
-        },
-        "image": ImageListType[],
+    track: LastTrackType[]
+}
+
+type LastTrackType = {
+    "@attr": {
+        "nowplaying": string
+    },
+    "album": {
+        "mbid": string,
+        "#text": string
+    },
+    "artist": {
         "mbid": string,
-        "name": string,
-        "streamable": number,
-        "url": string
-    }
+        "#text": string,
+    },
+    "image": ImageListType[],
+    "mbid": string,
+    "name": string,
+    "streamable": number,
+    "url": string
 }
 
 export const miscRouter = createTRPCRouter({
     song: publicProcedure
     .query(async () => {
-        const response = await axios.get<LastTrackType>("https://api.thatalex.dev/v3/music/last-track")
+        const response = await axios.get<TrackResponseType>("https://api.thatalex.dev/v3/music/last-track")
         return response.data
     }),
 })