go bills

src/components/Countdown.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useRef } from "react";
+
+export default function Countdown() {
+  const countdownRef = useRef<HTMLParagraphElement | null>(null);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+
+  useEffect(() => {
+    const dateOfStart = new Date("Sep 7, 2025 20:15:00").getTime();
+
+    setInterval(() => {
+      const currentDate = new Date().getTime();
+      const difference = dateOfStart - currentDate;
+
+      const days = Math.floor(difference / (1000 * 60 * 60 * 24));
+      const hours = Math.floor(
+        difference / (1000 * 60 * 60 * 24) / (1000 * 60 * 60)
+      );
+      const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
+      const seconds = Math.floor((difference % (1000 * 60)) / 1000);
+
+      if (countdownRef?.current) {
+        let timerString = "";
+        if (days) timerString += `${days}d, `;
+        if (hours) timerString += `${hours}h, `;
+        if (minutes) timerString += `${minutes}m, `;
+        if (seconds) timerString += `${seconds}s`;
+
+        if (
+          days <= 0 &&
+          hours <= 0 &&
+          minutes <= 0 &&
+          seconds <= 0 &&
+          timerString === ""
+        ) {
+          timerString = "GO BILLS";
+        }
+
+        countdownRef.current.innerText = timerString;
+      }
+    }, 1000);
+  }, []);
+
+  return (
+    <div className="border border-white bg-blue-800 border-solid rounded-lg w-full sm:w-[500px] mb-4">
+      <div className="flex items-center justify-between p-2">
+        <img
+          onClick={() => {
+            if (audioRef?.current) {
+              audioRef.current.play();
+            }
+          }}
+          width="50"
+          height="50"
+          className="hover:cursor-pointer"
+          src={"https://storage.alexav.gg/content/bills.png"}
+        />
+        <p className="text-2xl font-bold" ref={countdownRef}></p>
+      </div>
+      <audio
+        ref={audioRef}
+        autoPlay={false}
+        src={
+          "https://storage.alexav.gg/content/0f4ce103-62d0-4ff1-8b8b-e38becced35d.mp3"
+        }
+      />
+    </div>
+  );
+}

src/components/Layout.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, type ReactNode } from "react";
 import { Flashlight, FlashlightOff } from "lucide-react";
 import SplatterImage from "../assets/splatter.png";
+import Countdown from "./Countdown";
 
 export default function Layout({ children }: { children: ReactNode }) {
   const [pointerPosition, setPointerPosition] = useState({ x: 500, y: 500 });
@@ -139,6 +140,7 @@ export default function Layout({ children }: { children: ReactNode }) {
             <h1 className="text-2xl font-bold">welcome !</h1>
           </div>
         </div>
+        <Countdown />
         {children}
       </div>
 

src/components/RandomLyric.tsx

@@ -36,6 +36,10 @@ const lyrics: LyricItem[] = [
     string: "i wrote a song for you",
     url: "https://open.spotify.com/track/744zwLqGKbOZW3RnxkRfHE?si=4d2230964fcc4f2f",
   },
+  {
+    string: "oh madeline, how you been?",
+    url: "https://open.spotify.com/track/2DDo2QqElDO9PgOHeGtQiy?si=0fdcbaeb64694249",
+  },
 ];
 
 type LyricItem = {