rennovations
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -5,24 +5,24 @@ export default function ErrorState({
|
||||
}) {
|
||||
if (type === "error") {
|
||||
return (
|
||||
<div className="flex flex-col bg-zinc-800 text-white">
|
||||
<div className="px-2">
|
||||
<div className="flex flex-col bg-black text-white">
|
||||
<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="px-2">
|
||||
<div className="flex flex-col bg-black text-white">
|
||||
<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="px-2">
|
||||
<div className="flex flex-col bg-black text-white">
|
||||
<div className="px-2 text-center">
|
||||
<p>no game launched recently</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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="flex align-middle">
|
||||
<div className="w-full bg-black">
|
||||
<div className="text-center">
|
||||
<div className="pl-2 pr-1">
|
||||
<p>
|
||||
<span className="font-semibold">Currently Playing</span>:{" "}
|
||||
<p className="text-lg">
|
||||
<span className="font-semibold">Currently Playing - </span>
|
||||
<span className="underline">{music.title}</span> by{" "}
|
||||
<span className="underline">{music.artist}</span>
|
||||
</p>
|
||||
|
||||
@@ -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 (
|
||||
<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"
|
||||
/>
|
||||
|
||||
+30
-170
@@ -1,150 +1,20 @@
|
||||
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 (
|
||||
<>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
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<string>("home");
|
||||
const [overlayImage, setOverlayImage] = useState<string | null>(null);
|
||||
const [tab, setTab] = useState<"home" | "scores" | "fantasy" | "pictures">(
|
||||
"home",
|
||||
);
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
{overlayImage && (
|
||||
<div
|
||||
onClick={() => setOverlayImage(null)}
|
||||
className="absolute min-h-screen min-w-screen bg-black/75"
|
||||
>
|
||||
<div className="flex justify-center items-center h-screen">
|
||||
<img className="w-[400px]" src={overlayImage} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* bg-[#ebebeb] */}
|
||||
<div className="min-h-screen flex justify-center items-center text-white">
|
||||
<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">
|
||||
<div className="grid grid-cols-3 gap-2 p-2 text-2xl">
|
||||
<h1 className="font-semibold text-white">welcome</h1>
|
||||
@@ -156,47 +26,37 @@ export default function App() {
|
||||
</div>
|
||||
|
||||
<img
|
||||
className="h-[100px] object-[25%_35%] w-full object-cover"
|
||||
// src="https://storage.alexav.gg/content/1f822215-0768-424d-893a-13bcd10aa98b.jpg"
|
||||
className="h-[100px] object-[25%_35%] w-full object-cover border-b-black border-b-2 border-t-2 border-t-black"
|
||||
style={{
|
||||
objectPosition: "",
|
||||
}}
|
||||
src="https://storage.alexav.gg/content/sabres-board.jpg"
|
||||
/>
|
||||
<hr className="border-black" />
|
||||
|
||||
{tab === "home" && <HomePage />}
|
||||
{tab === "fantasy" && <FantasyStatus />}
|
||||
{tab === "pictures" && (
|
||||
<PicturesPage setOverlayImage={setOverlayImage} />
|
||||
)}
|
||||
{tab === "scores" && <ScoreModule />}
|
||||
|
||||
<div className="grid grid-cols-4 text-center border-b border-b-black">
|
||||
<h1
|
||||
onClick={() => setTab("home")}
|
||||
className={`border-r-1 border-t-1 border-black hover:cursor-pointer ${tab === "home" && "underline"}`}
|
||||
>
|
||||
<div className="flex flex-row space-x-2 justify-center text-2xl my-2">
|
||||
<Button active={tab === "home"} onClick={() => setTab("home")}>
|
||||
home
|
||||
</h1>
|
||||
<h1
|
||||
</Button>
|
||||
<Button active={tab === "scores"} onClick={() => setTab("scores")}>
|
||||
scores
|
||||
</Button>
|
||||
<Button
|
||||
active={tab === "pictures"}
|
||||
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"}`}
|
||||
>
|
||||
</Button>
|
||||
<Button active={tab === "fantasy"} onClick={() => setTab("fantasy")}>
|
||||
fantasy
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<hr className="border-black border-1" />
|
||||
|
||||
{tab === "home" && <Home />}
|
||||
{tab === "scores" && <ScoreModule />}
|
||||
{tab === "pictures" && <PicturesPage />}
|
||||
{tab === "fantasy" && <FantasyStatus />}
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user