add simple music widget

2024-10-20 15:32:31 -04:00
parent d243004ddf
commit f940f4b338
4 changed files with 81 additions and 26 deletions
@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react';
+import type { MusicAPIResponse, MusicData } from '../utils/types';
+
+export default function MusicWidget() {
+    const [ data, setData ] = useState<MusicData | null>(null);
+
+    const fetchMusicData = () => {
+        fetch("https://api.alexav.gg/v4/social/music", {
+            method: 'get'
+        })   
+        .then(async (res) => {
+            if (res.ok) {
+                const data = await res.json() as MusicAPIResponse;
+                setData(data.data.tracks[0]);
+            } else {
+                console.error("Failed to get music data!", res.status);
+            }
+        })
+    }
+
+    useEffect(() => {
+        fetchMusicData()
+        setInterval(() => {
+            fetchMusicData();
+        }, 60000)
+    }, [])
+
+    if (data) {
+        return (
+            <div className="bg-black rounded-lg p-2 w-fit text-white">
+                <div className="mx-auto text-center">
+                    <img className="mx-auto mb-2" width="70" src={data.image.filter((v) => v.size === "large")[0]['#text']} />
+                    <h1>{data.name}</h1>
+                    <p>{data.artist['#text']}</p>
+                </div>
+            </div>
+        )
+    } else {
+        return (
+            <div>
+                <p>Loading..</p>
+            </div>
+        )
+    }
+}