add simple music widget

src/components/ProjectComponents/RecentListens.tsx

@@ -1,31 +1,6 @@
 import { useState, useEffect } from 'react';
 import ProjectComponent from '../ProjectComponent';
-
-type MusicAPIResponse = {
-    data: {
-        tracks: MusicData[]
-    }
-}
-
-type MusicData = {
-    artist: {
-        mbid: string,
-        "#text": string
-    },
-    mbid: string,
-    album: {
-        mbid: string,
-        "#text": string,
-    },
-    name: string,
-    url: string,
-    image: MusicImage[]
-}
-
-type MusicImage = {
-    size: string,
-    "#text": string
-}
+import type { MusicData, MusicAPIResponse } from '../../utils/types';
 
 export default function RecentListens() {
     const [ data, setData ] = useState<MusicData[]>();

src/main.tsx

@@ -8,6 +8,7 @@ import './assets/main.css'
 // pages
 import MainPage from './pages/index';
 import PrivacyPage from './pages/privacy';
+import MusicWidget from './pages/music';
 
 const router = createBrowserRouter([
   {
@@ -17,6 +18,10 @@ const router = createBrowserRouter([
   {
     path: '/privacy',
     element: <PrivacyPage />
+  },
+  {
+    path: '/music',
+    element: <MusicWidget />
   }
 ])
 

src/pages/music.tsx

@@ -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>
+        )
+    }
+}

src/utils/types.ts

@@ -0,0 +1,30 @@
+type MusicAPIResponse = {
+    data: {
+        tracks: MusicData[]
+    }
+}
+
+type MusicData = {
+    artist: {
+        mbid: string,
+        "#text": string
+    },
+    mbid: string,
+    album: {
+        mbid: string,
+        "#text": string,
+    },
+    name: string,
+    url: string,
+    image: MusicImage[]
+}
+
+type MusicImage = {
+    size: string,
+    "#text": string
+}
+
+export type {
+    MusicAPIResponse,
+    MusicData
+}