diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 0000000..037f23e --- /dev/null +++ b/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 ( + + ); +} diff --git a/src/components/ErrorState.tsx b/src/components/ErrorState.tsx index 93bcd8d..11f7c7b 100644 --- a/src/components/ErrorState.tsx +++ b/src/components/ErrorState.tsx @@ -5,24 +5,24 @@ export default function ErrorState({ }) { if (type === "error") { return ( -
-
+
+

whoops, something went wrong

); } else if (type === "loading") { return ( -
-
+
+

loading..

); } else if (type === "unavailable") { return ( -
-
+
+

no game launched recently

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 65200b8..525d2f0 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -2,7 +2,7 @@ import type { ReactNode } from "react"; export default function Layout({ children }: { children: ReactNode }) { return ( -
+
{children}
); diff --git a/src/components/info/MusicComponent.tsx b/src/components/info/MusicComponent.tsx index cc8977c..5abe37a 100644 --- a/src/components/info/MusicComponent.tsx +++ b/src/components/info/MusicComponent.tsx @@ -30,11 +30,11 @@ export default function MusicComponent() { if (music) { return ( -
-
+
+
-

- Currently Playing:{" "} +

+ Currently Playing - {music.title} by{" "} {music.artist}

diff --git a/src/components/modules/PictureCarousel.tsx b/src/components/modules/PictureCarousel.tsx index 1e11ec4..ec872c3 100644 --- a/src/components/modules/PictureCarousel.tsx +++ b/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({ - onClick, -}: { - onClick: (url: string) => void; -}) { +export default function PictureCarousel() { return (
@@ -26,7 +22,6 @@ export default function PictureCarousel({ onClick(v)} src={v} className="inline w-[200px] max-h-[100px] object-cover" /> diff --git a/src/pages/App.tsx b/src/pages/App.tsx index cb1aed5..f32763d 100644 --- a/src/pages/App.tsx +++ b/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"; - -const HomePage = () => { - return ( - <> -
-
- -
-

@onelonesabre -- alex

-
-

- professional yapper -
- qa stuff @ medal -

-
-
-

links

- - - - - - - - - - - - - - - - - - - - - - - - - - -
twitter
instagram
medal
steam
spotify
-
-
-
- -
- -
-
-
-

about me

-

- 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 -

-
-
-
- shows dexter, - pitt, tlou, twd, yellowstone -
-
- music ptv, 5sos, - treaty oak, zach top, zach bryan -
-
-
- - -
- - ); -}; - -const PicturesPage = ({ - setOverlayImage, -}: { - setOverlayImage: (v: string | null) => void; -}) => { - return ( -
-

pictures

- -
- setOverlayImage(url)} /> -
-
- ); -}; +import Button from "../components/Button"; +import Home from "./Home"; +import ScoreModule from "../components/modules/ScoreModule"; +import PicturesPage from "./Pictures"; +import FantasyStatus from "../components/FantasyStatus"; export default function App() { - const [tab, setTab] = useState("home"); - const [overlayImage, setOverlayImage] = useState(null); + const [tab, setTab] = useState<"home" | "scores" | "fantasy" | "pictures">( + "home", + ); return ( - {overlayImage && ( -
setOverlayImage(null)} - className="absolute min-h-screen min-w-screen bg-black/75" - > -
- +
+
+
+

welcome

+ +

+ GO SABRES! +

- )} - {/* bg-[#ebebeb] */} -
-
-
-
-
-

welcome

- -

- GO SABRES! -

-
-
+ - -
- - {tab === "home" && } - {tab === "fantasy" && } - {tab === "pictures" && ( - - )} - {tab === "scores" && } - -
-

setTab("home")} - className={`border-r-1 border-t-1 border-black hover:cursor-pointer ${tab === "home" && "underline"}`} - > - home -

-

setTab("pictures")} - className={`border-r-1 border-t-1 border-black hover:cursor-pointer ${tab === "pictures" && "underline"}`} - > - pictures -

-

setTab("scores")} - className={`border-t-1 border-black hover:cursor-pointer ${tab === "scores" && "underline"}`} - > - scores -

-

setTab("fantasy")} - className={`border-l-1 border-t-1 border-black hover:cursor-pointer ${tab === "fantasy" && "underline"}`} - > - fantasy -

-
-
+
+ + + +
+ +
+ + {tab === "home" && } + {tab === "scores" && } + {tab === "pictures" && } + {tab === "fantasy" && }
); diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx new file mode 100644 index 0000000..d3c68c8 --- /dev/null +++ b/src/pages/Home.tsx @@ -0,0 +1,78 @@ +import MusicComponent from "../components/info/MusicComponent"; +export default function Home() { + return ( + <> +
+
+
+

alex (19)

+

professional yapper

+

qa stuff n things @ medal.tv

+

sabres sth, go sabres

+

khalil shakir truther

+

scrappy doo 6 truther

+
+ + +
+
+ +
+
+
+

about me

+

+ 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 +

+
+ +
+
+ shows dexter, + pitt, tlou, twd, yellowstone +
+
+ music ptv, 5sos, + treaty oak, zach top, zach bryan +
+
+ teams bills, + sabres, jays +
+
+
+
+ + ); +} diff --git a/src/pages/Pictures.tsx b/src/pages/Pictures.tsx new file mode 100644 index 0000000..932c3fe --- /dev/null +++ b/src/pages/Pictures.tsx @@ -0,0 +1,12 @@ +import PictureCarousel from "../components/modules/PictureCarousel"; +export default function PicturesPage() { + return ( +
+

pictures

+ +
+ +
+
+ ); +}