tuaaaaa

src/App.tsx

@@ -1,9 +1,11 @@
 import './App.css'
 import HoverComponent from './components/name.tsx'
 import AdvancedBr from './components/comps.tsx'
-import { createSignal } from 'solid-js';
+import { createSignal, onMount } from 'solid-js';
 import Reviews from './components/api.tsx';
-export const [ishover, setishover]= createSignal(false)
+import Music, { MusicEntry } from './components/music.tsx';
+export const [shouldpopup, setpopup] = createSignal(false)
+export const [ishover, setishover] = createSignal(false)
 function App() {
   function remov() {
     for (let i = 0; i < document.styleSheets.length; i++) {
@@ -17,9 +19,21 @@ function App() {
       }
     }
   }
-
+  const [musicList, setMusicList] = createSignal<string[]>([]);
+  const [isLoading, setIsLoading] = createSignal(true);
   const [isAnimating, setIsAnimating] = createSignal(false);
   const [animatedwoem, setanimatedwoem] = createSignal(false);
+  onMount(async () => {
+    try {
+      const response = await fetch("https://imtoolazytomakeaproperapi.exhq.dev/");
+      const data = await response.json();
+      setMusicList(data);
+    } catch (error) {
+      console.error("Error fetching music data:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  });
   let gitgay = <img onClick={() => {
     setIsAnimating(true)
     setTimeout(() => {
@@ -28,7 +42,6 @@ function App() {
     gitgay.src = "/gaybackground.png"
   }} classList={{ 'gitgayimg': true, 'animate': isAnimating(), 'gaybackground': isAnimating() }} src="https://git.gay/assets/img/logo.png" alt="LMAO IMAGINE BEING BLIND" /> as HTMLImageElement
   return (
-
     <>
       <div class='header'>
         <img onmouseenter={remov} src="https://dp.nea.moe/avatar/712639419785412668.png" class="logo-pfp" alt="LMAO IMAGINE BEING BLIND" />
@@ -67,19 +80,36 @@ function App() {
         </div>
 
         <div
-        onMouseEnter={()=> {setishover(true)}}
-        onmouseleave={() => {setishover(false)}}
-        style={{
-          opacity: isAnimating() || animatedwoem() ? "0%" : "100%"
-        }} class='cardchild'>
+          onMouseEnter={() => { setishover(true) }}
+          onmouseleave={() => { setishover(false) }}
+          style={{
+            opacity: isAnimating() || animatedwoem() ? "0%" : "100%"
+          }} class='cardchild'>
           <Reviews />
         </div>
       </div>
-      <AdvancedBr count={2}/>
+      <AdvancedBr count={2} />
       <div class='easteregg'>
-          <input type="text" name="bals?"  class='theeaster'/>
+        <input type="button" onclick={() => { setpopup(!shouldpopup()) }} class="musicbutton" value="say gex" />
+
       </div>
       <AdvancedBr count={3} />
+      <Music shouldpopup={shouldpopup}>
+        <div class='musicdiv'>
+          <div class='innermusic'>
+            <div class="music-close-button-div">
+              <button class="close-button" onClick={() => { setpopup(false) }}>X</button>
+            </div>
+            <div class='musiclist'>
+              {isLoading() ? (
+                <p>Loading...</p>
+              ) : (
+                musicList().map((link) => <MusicEntry spotifylink={link} />)
+              )}
+            </div>
+          </div>
+        </div>
+      </Music>
     </>
   )
 }