add music route

src/assets/main.css

@@ -7,4 +7,9 @@
 body {
     font-family: 'Pathway Gothic One', sans-serif;
     overflow: hidden;
+}
+
+@keyframes scroll {
+    0% { transform: translateX(100%); }
+    100% { transform: translateX(-100%); }
 }

src/components/MusicComponent.tsx

@@ -1,21 +1,8 @@
 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;
-};
+import type { LastFMMusicObject } from "../utils/types";
 
 export default function MusicComponent() {
-  const [music, setMusic] = useState<MusicObject | null>(null);
+  const [music, setMusic] = useState<LastFMMusicObject | null>(null);
   const [failedFetch, setFailedFetch] = useState(false);
 
   useEffect(() => {
@@ -23,7 +10,7 @@ export default function MusicComponent() {
       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);
+        setMusic(data.data.tracks[0] as LastFMMusicObject);
       } else setFailedFetch(true);
     }
 

src/main.tsx

@@ -1,5 +1,20 @@
 import { createRoot } from "react-dom/client";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import "./assets/main.css";
-import App from "./App.tsx";
+import App from "./pages/App.tsx";
+import Music from "./pages/Music.tsx";
 
-createRoot(document.getElementById("root")!).render(<App />);
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <App />,
+  },
+  {
+    path: "/music",
+    element: <Music />,
+  },
+]);
+
+createRoot(document.getElementById("root")!).render(
+  <RouterProvider router={router} />
+);

src/pages/App.tsx

@@ -1,8 +1,8 @@
-import MusicComponent from "./components/MusicComponent";
-import TVComponent from "./components/TVComponent";
-import Layout from "./components/Layout";
-import GameComponent from "./components/GameComponent";
-import RandomLyric from "./components/RandomLyric";
+import Layout from "../components/Layout";
+import MusicComponent from "../components/MusicComponent";
+import TVComponent from "../components/TVComponent";
+import GameComponent from "../components/GameComponent";
+import RandomLyric from "../components/RandomLyric";
 
 export default function App() {
   return (

src/pages/Music.tsx

@@ -0,0 +1,44 @@
+import { useState, useEffect } from "react";
+import { LastFMMusicObject } from "../utils/types";
+
+export default function Music() {
+  const [musicState, setMusicState] = useState<LastFMMusicObject | null>(null);
+
+  useEffect(() => {
+    const fetchMusic = async () => {
+      const res = await fetch("https://api.alexav.gg/v4/social/music");
+      if (res.ok) {
+        const data = await res.json();
+        setMusicState(data.data.tracks[0]);
+      } else {
+        console.error("failed to load music!");
+      }
+    };
+
+    fetchMusic();
+    setInterval(fetchMusic, 60000);
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-black text-white">
+      <div className="flex flex-col justify-center items-center">
+        <img
+          width={150}
+          height={150}
+          src={musicState?.image.filter((v) => v.size === "large")[0]["#text"]}
+        />
+
+        <div className="my-2 text-center">
+          <div className="overflow-hidden whitespace-nowrap">
+            <div className="animate-[scroll_10s_linear_infinite] flex">
+              <span className="flex-shrink-0 px-4 text-2xl font-bold">
+                {musicState?.name}
+              </span>
+            </div>
+          </div>
+          <p className="font-semibold">{musicState?.artist?.["#text"]}</p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/utils/types.ts

@@ -0,0 +1,15 @@
+type LastFMMusicObject = {
+  artist: {
+    mbid: string;
+    "#text": string;
+  };
+  name: string;
+  image: LastFMImageObject[];
+  url: string;
+};
+type LastFMImageObject = {
+  size: "small" | "medium" | "large" | "extralarge";
+  "#text": string;
+};
+
+export type { LastFMMusicObject, LastFMImageObject };