new currently playing music card

src/components/MusicCard.tsx

@@ -0,0 +1,30 @@
+import Image from "next/image";
+import Link from "next/link";
+import { api } from "@/utils/api";
+
+export default function MusicCard() {
+    const musicFetch = 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>{musicFetch.data.track.name}</h1>
+                            <p>{musicFetch.data.track.artist["#text"]}</p>
+                        </div>
+                    </div>
+                </div>
+            </Link>
+        )
+    }
+}

src/components/footer.tsx

@@ -11,7 +11,7 @@ export default function Footer() {
                     </Link>
                 </p>
                 <p className="text-center">
-                    All music, game, TV and movie covers are owned by their respective authors.
+                    All music, game, TV and movie covers are owned by their respective authors.<br/>Currently playing info provided by Last.fm
                 </p>
                 <p className="text-center">
                     &copy; Alex Frantz, 2023