new site

2025-04-17 22:39:01 -04:00
parent 0213e84e78
commit f56959cb7f
52 changed files with 2766 additions and 5111 deletions
@@ -0,0 +1,63 @@
+import { useState, useEffect } from 'react';
+
+type MusicObject = {
+    artist: {
+        mbid: string,
+        "#text": string
+    },
+    name: string,
+    image: ImageObject[],
+    url: string
+}
+type ImageObject = {
+    size: "small" | "medium" | "large" | "extralarge",
+    "#text": string
+}
+
+export default function MusicComponent() {
+    const [ music, setMusic ] = useState<MusicObject | null>(null);
+    const [ failedFetch, setFailedFetch ] = useState(false);
+
+    useEffect(() => {
+        async function fetchMusic() {
+            const response = await fetch("https://api.alexav.gg/v4/social/music")
+            if (response.ok) {
+                const data = await response.json()
+                setMusic(data.data.tracks[0] as MusicObject)
+            } else setFailedFetch(true)
+        }
+
+        setTimeout(() => {
+            fetchMusic()
+        }, 60000)
+        fetchMusic()
+    }, [])
+
+    if (music) {
+        return (
+            <div className="flex align-middle">
+                <img width="50" src={music.image[1]['#text']} />
+                <div className="pl-2">
+                    <h1>{music.name}</h1>
+                    <p>{music.artist['#text']}</p>
+                </div>
+            </div>
+        )
+    } else {
+        if (failedFetch) {
+            return (
+                <div>
+                    <h1>uh oh!</h1>
+                    <p>failed to get music :(</p>
+                </div>
+            )
+        } else {
+            return (
+                <div>
+                    <h1>loading music..</h1>
+                    <p>loading artist..</p>
+                </div>
+            )
+        }
+    }
+}