add music route

2025-06-08 14:25:10 -04:00
parent 2305d2665b
commit da842a3e13
8 changed files with 144 additions and 23 deletions
@@ -0,0 +1,63 @@
+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 (
+    <Layout>
+      <div className="border border-white border-solid rounded-lg w-full sm:w-[500px] p-2">
+        <div className="grid grid-cols-1 xs:grid-cols-2">
+          <div className="mx-auto">
+            <div>
+              <h1 className="text-2xl font-bold italic opacity-95 inline">
+                alex, 18
+              </h1>
+              <RandomLyric speed={0.2} />
+              <img
+                src="https://storage.alexav.gg/content/picture.gif"
+                width="150"
+                className="rounded-md"
+                alt="Profile"
+              />
+
+              <div className="pt-2">
+                <MusicComponent />
+                <a
+                  href="https://last.fm/user/lulawex"
+                  target="_blank"
+                  className="hover:underline w-fit opacity-50"
+                >
+                  powered by last.fm
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className="mx-auto">
+            <h1 className="font-bold text-2xl italic">what i do</h1>
+            <p>
+              qa @{" "}
+              <a
+                href="https://medal.tv"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="hover:underline"
+              >
+                medal.tv
+              </a>
+              , game, code
+            </p>
+
+            <h1 className="font-bold text-2xl italic">obsessed with</h1>
+            <p>tlou, twd, rdr, dexter</p>
+
+            <h1 className="font-bold text-2xl italic">status</h1>
+            <TVComponent />
+            <GameComponent />
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}
@@ -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>
+  );
+}