new music card

src/components/BlogCard.tsx

@@ -1,26 +0,0 @@
-import Image from 'next/image'
-import Link from 'next/link';
-
-type BlogCardProps = {
-    image: string,
-    name: string,
-    tagline: string,
-    id: number
-}
-export default function BlogCard(props: BlogCardProps) {
-    return (
-        <Link href={`/blog/${props.id}`}>
-            <div className="inline-block">
-                <div className="bg-white text-black text-center">
-                    <div>
-                        <Image src={props.image} width="300" height="300" alt="Blog Cover" />
-                    </div>
-                    <div className="p-4 divide-y divide-black">
-                        <h1 className="font-bold">{props.name}</h1>
-                        <p>{props.tagline}</p>
-                    </div>
-                </div>
-            </div>
-        </Link>
-    )
-}

src/components/Dropdown.tsx

@@ -1,22 +0,0 @@
-import React, {useState} from 'react';
-
-type DropdownProps = {
-    name: string,
-    content: React.JSX.Element[]
-}
-
-export default function Dropdown(props: DropdownProps) {
-    const [active, setActive] = useState(false)
-    return (
-        <>
-            <div className="relative flex py-5 items-center hover:cursor-pointer" onClick={() => active ? setActive(false) : setActive(true)}>
-                <span className="flex-shrink mx-4 text-gray-400">{props.name}</span>
-                <div className="flex-grow border-t border-gray-400"></div>
-            </div>
-
-            <div className={`${active ? "block" : "hidden"} inline-block`}>
-                {props.content}
-            </div>
-        </>
-    )
-}

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 text-black max-w-fit mx-auto p-4">
-                <div className="bg-white max-w-xs text-black rounded-sm leading-tight">
+            <h1 className="text-2xl font-bold inline">Listening To</h1>
-                    <div className="flex items-start p-2">
+
-                        <div className="flex-none">
+            {/* 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={musicFetch.data.track.image[3]?.["#text"] ?? ""}
+                                        src={v.image[0]?.["#text"] ?? "https://storage.thatalex.dev/content/pfp.jpg"}
-                                alt="Cover Art" 
                                         width="50"
                                         height="50"
+                                        alt={`${v.name} Cover Art`}
+                                        className="inline mr-2"
                                     />
-                        </div>
+                                    <div className="inline-block align-middle">
-                        <div className="flex flex-col ml-2 pt-1.5">
+                                        <Link href={v.url} target="_blank">
-                            <h1 className="text-sm truncate">{musicFetch.data.track.name}</h1>
+                                            <h1 className="font-bold w-52 truncate hover:underline">{v.name}</h1>
-                            <p>{musicFetch.data.track.artist["#text"]}</p>
-                        </div>
-                    </div>
-                </div>
                                         </Link>
+                                        <p className="opacity-75">{v.artist["#text"]}</p>
+                                    </div>
+                                </div>
+                            })
+                        }
+                    </div>
+                :
+                    <p className="font-bold">Hold tight, fetching..</p>
+            }
+        </div>
     )
 }
-}

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>
     )

src/server/api/routers/misc.ts

@@ -10,10 +10,15 @@ type ImageListType = {
     "#text": string
 }
 
-type LastTrackType = {
+type TrackResponseType = {
     status: number,
-    track: {
+    track: LastTrackType[]
-        "@attr": object,
+}
+
+type LastTrackType = {
+    "@attr": {
+        "nowplaying": string
+    },
     "album": {
         "mbid": string,
         "#text": string
@@ -28,12 +33,11 @@ type LastTrackType = {
     "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
     }),
 })