rennovations

src/components/Button.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+
+export default function Button({
+  onClick,
+  active = false,
+  children,
+}: {
+  onClick: () => void;
+  active?: boolean;
+  children: string | ReactNode;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      type="button"
+      className={`bg-black hover:cursor-pointer rounded-lg text-white px-4 ${active && "underline"}`}
+    >
+      {children}
+    </button>
+  );
+}

src/components/ErrorState.tsx

@@ -5,24 +5,24 @@ export default function ErrorState({
 }) {
   if (type === "error") {
     return (
-      <div className="flex flex-col bg-zinc-800 text-white">
+      <div className="flex flex-col bg-black text-white">
-        <div className="px-2">
+        <div className="px-2 text-center">
           <p>whoops, something went wrong</p>
         </div>
       </div>
     );
   } else if (type === "loading") {
     return (
-      <div className="flex flex-col bg-zinc-800 text-white">
+      <div className="flex flex-col bg-black text-white">
-        <div className="px-2">
+        <div className="px-2 text-center">
           <h1 className="font-semibold">loading..</h1>
         </div>
       </div>
     );
   } else if (type === "unavailable") {
     return (
-      <div className="flex flex-col bg-zinc-800 text-white">
+      <div className="flex flex-col bg-black text-white">
-        <div className="px-2">
+        <div className="px-2 text-center">
           <p>no game launched recently</p>
         </div>
       </div>

src/components/Layout.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
-    <div className="bg-neutral-800 text-white min-h-screen select-none">
+    <div className="bg-neutral-800 text-white min-h-screen flex justify-center items-center select-none">
       <div className="relative">{children}</div>
     </div>
   );

src/components/info/MusicComponent.tsx

@@ -30,11 +30,11 @@ export default function MusicComponent() {
     if (music) {
       return (
         <a href="https://koito.fntz.net" target="_blank">
-          <div className="w-full bg-zinc-800">
+          <div className="w-full bg-black">
-            <div className="flex align-middle">
+            <div className="text-center">
               <div className="pl-2 pr-1">
-                <p>
+                <p className="text-lg">
-                  <span className="font-semibold">Currently Playing</span>:{" "}
+                  <span className="font-semibold">Currently Playing - </span>
                   <span className="underline">{music.title}</span> by{" "}
                   <span className="underline">{music.artist}</span>
                 </p>

src/components/modules/PictureCarousel.tsx

@@ -13,11 +13,7 @@ const images = [
   "https://storage.alexav.gg/content/2f36c1dd-eaf8-4fd3-a3cd-1d25fe8f5a07.jpg",
 ];
 
-export default function PictureCarousel({
+export default function PictureCarousel() {
-  onClick,
-}: {
-  onClick: (url: string) => void;
-}) {
   return (
     <div className="rounded-lg">
       <div className="my-2 space-x-2 space-y-2">
@@ -26,7 +22,6 @@ export default function PictureCarousel({
             <img
               key={k}
               loading="lazy"
-              onClick={() => onClick(v)}
               src={v}
               className="inline w-[200px] max-h-[100px] object-cover"
             />

src/pages/App.tsx

@@ -1,202 +1,62 @@
 import { useState } from "react";
 import Layout from "../components/Layout";
-import PictureCarousel from "../components/modules/PictureCarousel";
-import ScoreModule from "../components/modules/ScoreModule";
-import FantasyStatus from "../components/FantasyStatus";
 import Clock from "../components/modules/Clock";
-import MusicComponent from "../components/info/MusicComponent";
+import Button from "../components/Button";
-
+import Home from "./Home";
-const HomePage = () => {
+import ScoreModule from "../components/modules/ScoreModule";
-  return (
+import PicturesPage from "./Pictures";
-    <>
+import FantasyStatus from "../components/FantasyStatus";
-      <div className="p-2">
-        <div className="flex flex-row space-x-2">
-          <img
-            className="h-40 w-40 object-cover object-top rounded-lg"
-            src="https://storage.alexav.gg/content/f49b355a-25cd-48ba-8421-da702620fcc6.jpeg"
-          />
-          <div>
-            <p className="text-lg">@onelonesabre -- alex</p>
-            <hr />
-            <p>
-              professional yapper
-              <br />
-              qa stuff @ medal
-            </p>
-          </div>
-          <div className="flex flex-col">
-            <h1 className="text-2xl font-bold">links</h1>
-            <table className="border border-white border-solid sm:w-42 h-fit">
-              <tr className="border-b border-white border-solid flex">
-                <a
-                  href="https://twitter.com/onelonesabre"
-                  target="_blank"
-                  className="hover:underline"
-                >
-                  <td className="px-2">twitter</td>
-                </a>
-              </tr>
-              <tr className="border-b border-white border-solid flex">
-                <a
-                  href="https://instagram.com/alexfrantz07"
-                  target="_blank"
-                  className="hover:underline"
-                >
-                  <td className="px-2">instagram</td>
-                </a>
-              </tr>
-              <tr className="border-b border-white border-solid flex">
-                <a
-                  href="https://medal.tv/u/alexav"
-                  target="_blank"
-                  className="hover:underline"
-                >
-                  <td className="px-2">medal</td>
-                </a>
-              </tr>
-              <tr className="border-b border-white border-solid flex">
-                <a
-                  href="https://steampowered.com/id/bayharborsmoocher"
-                  target="_blank"
-                  className="hover:underline"
-                >
-                  <td className="px-2">steam</td>
-                </a>
-              </tr>
-              <tr className="border-b border-white border-solid flex">
-                <a
-                  href="https://open.spotify.com/user/vdcj47vkp0cp9jkusnz5nckbj?si=c2a6473dc2294317"
-                  target="_blank"
-                  className="hover:underline"
-                >
-                  <td className="px-2">spotify</td>
-                </a>
-              </tr>
-            </table>
-          </div>
-        </div>
-      </div>
-
-      <hr className="border-black" />
-
-      <div>
-        <div className="grid grid-cols-2 mt-2">
-          <div className="px-2 pb-2">
-            <h1 className="text-2xl font-bold">about me</h1>
-            <p>
-              born and raised buffalonian + wnyer. doing qa work for 4 years and
-              learning software engineering on the side. i also play acoustic
-              guitar, been gaming since i was 4 and love going to games in
-              Buffalo. incredibly awkward, but that's besides the point
-            </p>
-          </div>
-          <div className="text-2xl w-[200px] mx-auto my-auto">
-            <div>
-              <span className="bg-black text-white px-1">shows</span> dexter,
-              pitt, tlou, twd, yellowstone
-            </div>
-            <div>
-              <span className="bg-black text-white px-1">music</span> ptv, 5sos,
-              treaty oak, zach top, zach bryan
-            </div>
-          </div>
-        </div>
-
-        <MusicComponent />
-      </div>
-    </>
-  );
-};
-
-const PicturesPage = ({
-  setOverlayImage,
-}: {
-  setOverlayImage: (v: string | null) => void;
-}) => {
-  return (
-    <div className="p-2 flex flex-col justify-center">
-      <h1 className="text-2xl font-bold">pictures</h1>
-
-      <div className="h-96 overflow-y-auto">
-        <PictureCarousel onClick={(url: string) => setOverlayImage(url)} />
-      </div>
-    </div>
-  );
-};
 
 export default function App() {
-  const [tab, setTab] = useState<string>("home");
+  const [tab, setTab] = useState<"home" | "scores" | "fantasy" | "pictures">(
-  const [overlayImage, setOverlayImage] = useState<string | null>(null);
+    "home",
+  );
 
   return (
     <Layout>
-      {overlayImage && (
+      <div className="border-3 bg-gradient-to-t from-[#003087] to-[#FFB81C] border-black w-full sm:w-[500px]">
-        <div
+        <div className="bg-[#003087] w-full">
-          onClick={() => setOverlayImage(null)}
+          <div className="grid grid-cols-3 gap-2 p-2 text-2xl">
-          className="absolute min-h-screen min-w-screen bg-black/75"
+            <h1 className="font-semibold text-white">welcome</h1>
-        >
+            <Clock />
-          <div className="flex justify-center items-center h-screen">
+            <h1 className="text-right text-transparent font-bold bg-clip-text bg-gradient-to-t from-[#003087] to-[#FFB81C]">
-            <img className="w-[400px]" src={overlayImage} />
+              GO SABRES!
+            </h1>
           </div>
         </div>
-      )}
 
-      {/* bg-[#ebebeb] */}
+        <img
-      <div className="min-h-screen flex justify-center items-center text-white">
+          className="h-[100px] object-[25%_35%] w-full object-cover border-b-black border-b-2 border-t-2 border-t-black"
-        <div className="border-3 bg-gradient-to-t from-[#003087] to-[#FFB81C] border-black w-full sm:w-[500px]">
+          style={{
-          <div>
+            objectPosition: "",
-            <div className="bg-[#003087] w-full">
+          }}
-              <div className="grid grid-cols-3 gap-2 p-2 text-2xl">
+          src="https://storage.alexav.gg/content/sabres-board.jpg"
-                <h1 className="font-semibold text-white">welcome</h1>
+        />
-                <Clock />
-                <h1 className="text-right text-transparent font-bold bg-clip-text bg-gradient-to-t from-[#003087] to-[#FFB81C]">
-                  GO SABRES!
-                </h1>
-              </div>
-            </div>
 
-            <img
+        <div className="flex flex-row space-x-2 justify-center text-2xl my-2">
-              className="h-[100px] object-[25%_35%] w-full object-cover"
+          <Button active={tab === "home"} onClick={() => setTab("home")}>
-              // src="https://storage.alexav.gg/content/1f822215-0768-424d-893a-13bcd10aa98b.jpg"
+            home
-              src="https://storage.alexav.gg/content/sabres-board.jpg"
+          </Button>
-            />
+          <Button active={tab === "scores"} onClick={() => setTab("scores")}>
-            <hr className="border-black" />
+            scores
-
+          </Button>
-            {tab === "home" && <HomePage />}
+          <Button
-            {tab === "fantasy" && <FantasyStatus />}
+            active={tab === "pictures"}
-            {tab === "pictures" && (
+            onClick={() => setTab("pictures")}
-              <PicturesPage setOverlayImage={setOverlayImage} />
+          >
-            )}
+            pictures
-            {tab === "scores" && <ScoreModule />}
+          </Button>
-
+          <Button active={tab === "fantasy"} onClick={() => setTab("fantasy")}>
-            <div className="grid grid-cols-4 text-center border-b border-b-black">
+            fantasy
-              <h1
+          </Button>
-                onClick={() => setTab("home")}
-                className={`border-r-1 border-t-1 border-black hover:cursor-pointer ${tab === "home" && "underline"}`}
-              >
-                home
-              </h1>
-              <h1
-                onClick={() => setTab("pictures")}
-                className={`border-r-1 border-t-1 border-black hover:cursor-pointer ${tab === "pictures" && "underline"}`}
-              >
-                pictures
-              </h1>
-              <h1
-                onClick={() => setTab("scores")}
-                className={`border-t-1 border-black hover:cursor-pointer ${tab === "scores" && "underline"}`}
-              >
-                scores
-              </h1>
-              <h1
-                onClick={() => setTab("fantasy")}
-                className={`border-l-1 border-t-1 border-black hover:cursor-pointer ${tab === "fantasy" && "underline"}`}
-              >
-                fantasy
-              </h1>
-            </div>
-          </div>
         </div>
+
+        <hr className="border-black border-1" />
+
+        {tab === "home" && <Home />}
+        {tab === "scores" && <ScoreModule />}
+        {tab === "pictures" && <PicturesPage />}
+        {tab === "fantasy" && <FantasyStatus />}
       </div>
     </Layout>
   );

src/pages/Home.tsx

@@ -0,0 +1,78 @@
+import MusicComponent from "../components/info/MusicComponent";
+export default function Home() {
+  return (
+    <>
+      <div className="p-2">
+        <div className="grid grid-cols-3 gap-2">
+          <div>
+            <h1 className="text-2xl font-semibold">alex (19)</h1>
+            <p>professional yapper</p>
+            <p>qa stuff n things @ medal.tv</p>
+            <p>sabres sth, go sabres</p>
+            <p>khalil shakir truther</p>
+            <p>scrappy doo 6 truther</p>
+          </div>
+          <img
+            className="h-40 w-40 object-cover object-top rounded-lg"
+            src="https://storage.alexav.gg/content/f49b355a-25cd-48ba-8421-da702620fcc6.jpeg"
+          />
+          <div>
+            <h1 className="text-2xl font-bold text-center">socials</h1>
+            <ul>
+              <a href="https://twitter.com/onelonesabre" target="_blank">
+                <li className="border-b-2 border-b-black">twitter</li>
+              </a>
+              <a href="https://instagram.com/alexfrantz07" target="_blank">
+                <li className="border-b-2 border-b-black">instagram</li>
+              </a>
+              <a
+                href="https://steamcommunity.com/id/bayharborsmoocher/"
+                target="_blank"
+              >
+                <li className="border-b-2 border-b-black">steam</li>
+              </a>
+              <a href="https://medal.tv/u/alexav" target="_blank">
+                <li className="border-b-2 border-b-black">medal</li>
+              </a>
+              <a
+                href="https://open.spotify.com/user/vdcj47vkp0cp9jkusnz5nckbj?si=825f8fdef40746ca"
+                target="_blank"
+              >
+                <li className="border-b-2 border-b-black">spotify</li>
+              </a>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <MusicComponent />
+      <div className="p-2">
+        <div className="flex flex-row justify-between">
+          <div className="w-[240px]">
+            <h1 className="text-2xl font-semibold">about me</h1>
+            <p>
+              born and raised buffalonian + wnyer. doing qa work for 4 years and
+              learning software engineering on the side. i also play acoustic
+              guitar, been gaming since i was 4 and love going to games in
+              Buffalo. incredibly awkward, but that's besides the point
+            </p>
+          </div>
+
+          <div className="text-2xl w-[200px] mx-auto my-auto">
+            <div>
+              <span className="bg-black text-white px-1">shows</span> dexter,
+              pitt, tlou, twd, yellowstone
+            </div>
+            <div>
+              <span className="bg-black text-white px-1">music</span> ptv, 5sos,
+              treaty oak, zach top, zach bryan
+            </div>
+            <div>
+              <span className="bg-black text-white px-1">teams</span> bills,
+              sabres, jays
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

src/pages/Pictures.tsx

@@ -0,0 +1,12 @@
+import PictureCarousel from "../components/modules/PictureCarousel";
+export default function PicturesPage() {
+  return (
+    <div className="p-2 flex flex-col justify-center">
+      <h1 className="text-2xl font-bold">pictures</h1>
+
+      <div className="h-96 overflow-y-auto">
+        <PictureCarousel />
+      </div>
+    </div>
+  );
+}