redesign
This commit is contained in:
@@ -5,27 +5,24 @@ export default function ErrorState({
|
|||||||
}) {
|
}) {
|
||||||
if (type === "error") {
|
if (type === "error") {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col bg-black border border-black text-white">
|
<div className="flex flex-col bg-zinc-800 text-white">
|
||||||
<div className="px-2">
|
<div className="px-2">
|
||||||
<h1 className="text-lg font-semibold">uh oh :(</h1>
|
<p>whoops, something went wrong</p>
|
||||||
<p>something went wrong loading this stat</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
} else if (type === "loading") {
|
} else if (type === "loading") {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col bg-black border border-black text-white">
|
<div className="flex flex-col bg-zinc-800 text-white">
|
||||||
<div className="px-2">
|
<div className="px-2">
|
||||||
<h1 className="text-lg font-semibold">loading..</h1>
|
<h1 className="font-semibold">loading..</h1>
|
||||||
<p>hang tight..</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
} else if (type === "unavailable") {
|
} else if (type === "unavailable") {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col bg-black border border-black text-white">
|
<div className="flex flex-col bg-zinc-800 text-white">
|
||||||
<div className="px-2">
|
<div className="px-2">
|
||||||
<h1 className="text-lg font-semibold">nothing here :(</h1>
|
|
||||||
<p>no game launched recently</p>
|
<p>no game launched recently</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -30,17 +30,14 @@ export default function MusicComponent() {
|
|||||||
if (music) {
|
if (music) {
|
||||||
return (
|
return (
|
||||||
<a href="https://koito.fntz.net" target="_blank">
|
<a href="https://koito.fntz.net" target="_blank">
|
||||||
<div className="flex flex-col bg-black border border-black text-white">
|
<div className="w-full bg-zinc-800">
|
||||||
<div className="flex align-middle">
|
<div className="flex align-middle">
|
||||||
<img
|
|
||||||
className="w-[50px] h-[50px] object-cover"
|
|
||||||
src={music.images[1]?.url}
|
|
||||||
/>
|
|
||||||
<div className="pl-2 pr-1">
|
<div className="pl-2 pr-1">
|
||||||
<p className="w-[150px] truncate overflow-hidden whitespace-nowrap">
|
<p>
|
||||||
{music.title}
|
<span className="font-semibold">Currently Playing</span>:{" "}
|
||||||
|
<span className="underline">{music.title}</span> by{" "}
|
||||||
|
<span className="underline">{music.artist}</span>
|
||||||
</p>
|
</p>
|
||||||
<p> {music.artist}</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -52,41 +49,4 @@ export default function MusicComponent() {
|
|||||||
} else {
|
} else {
|
||||||
return <ErrorState type="error" />;
|
return <ErrorState type="error" />;
|
||||||
}
|
}
|
||||||
|
|
||||||
// if (music) {
|
|
||||||
// return (
|
|
||||||
// <a href="https://last.fm/user/lulawex" target="_blank">
|
|
||||||
// <div className="flex flex-col bg-black border border-black text-white">
|
|
||||||
// <div className="flex align-middle">
|
|
||||||
// <img
|
|
||||||
// className="w-[50px] h-[50px] object-cover"
|
|
||||||
// src={music.images[1]?.url}
|
|
||||||
// />
|
|
||||||
// <div className="pl-2 pr-1">
|
|
||||||
// <p className="w-[150px] truncate overflow-hidden whitespace-nowrap">
|
|
||||||
// {music.title}
|
|
||||||
// </p>
|
|
||||||
// <p> {music.artist}</p>
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
// </a>
|
|
||||||
// );
|
|
||||||
// } else {
|
|
||||||
// if (failedFetch) {
|
|
||||||
// return (
|
|
||||||
// <div>
|
|
||||||
// <h1>uh oh!</h1>
|
|
||||||
// <p>failed to get music :(</p>
|
|
||||||
// </div>
|
|
||||||
// );
|
|
||||||
// } else {
|
|
||||||
// return (
|
|
||||||
// <div>
|
|
||||||
// <h1>loading music..</h1>
|
|
||||||
// <p>loading artist..</p>
|
|
||||||
// </div>
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|||||||
+75
-90
@@ -1,9 +1,7 @@
|
|||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import Layout from "../components/Layout";
|
import Layout from "../components/Layout";
|
||||||
import GameComponent from "../components/info/GameComponent";
|
|
||||||
import PictureCarousel from "../components/modules/PictureCarousel";
|
import PictureCarousel from "../components/modules/PictureCarousel";
|
||||||
import ScoreModule from "../components/modules/ScoreModule";
|
import ScoreModule from "../components/modules/ScoreModule";
|
||||||
import StatModule from "../components/modules/StatModule";
|
|
||||||
import FantasyStatus from "../components/FantasyStatus";
|
import FantasyStatus from "../components/FantasyStatus";
|
||||||
import Clock from "../components/modules/Clock";
|
import Clock from "../components/modules/Clock";
|
||||||
import MusicComponent from "../components/info/MusicComponent";
|
import MusicComponent from "../components/info/MusicComponent";
|
||||||
@@ -12,90 +10,78 @@ const HomePage = () => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="p-2">
|
<div className="p-2">
|
||||||
<div className="grid grid-cols-3 gap-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>
|
<div>
|
||||||
<img
|
<p className="text-lg">@onelonesabre -- alex</p>
|
||||||
className="h-40 w-50 object-cover object-top"
|
|
||||||
src="https://storage.alexav.gg/content/f49b355a-25cd-48ba-8421-da702620fcc6.jpeg"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h1 className="text-2xl font-semibold">hi, i'm alex!</h1>
|
|
||||||
<p className="text-lg">
|
|
||||||
qa stuff & things at{" "}
|
|
||||||
<a
|
|
||||||
className="underline"
|
|
||||||
href="https://medal.tv/u/alexav"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Medal.tv
|
|
||||||
</a>{" "}
|
|
||||||
<br />
|
|
||||||
sabres szn ticket holder
|
|
||||||
<br />
|
|
||||||
master of shenanigans
|
|
||||||
</p>
|
|
||||||
<hr />
|
<hr />
|
||||||
<div className="block space-x-1">
|
<p>
|
||||||
<a
|
professional yapper
|
||||||
href="https://twitter.com/onelonesabre"
|
<br />
|
||||||
className="hover:underline"
|
qa stuff @ medal
|
||||||
target="_blank"
|
</p>
|
||||||
>
|
|
||||||
twt
|
|
||||||
</a>
|
|
||||||
<span>•</span>
|
|
||||||
<a
|
|
||||||
className="hover:underline"
|
|
||||||
href="https://instagram.com/alexfrantz07"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
instagram
|
|
||||||
</a>
|
|
||||||
<span>•</span>
|
|
||||||
<a
|
|
||||||
className="hover:underline"
|
|
||||||
href="https://tiktok.com/@lostinherabyss_"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
tiktok
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div className="block space-x-2">
|
|
||||||
<a
|
|
||||||
className="hover:underline"
|
|
||||||
href="https://steamcommunity.com/id/bayharborsmoocher/"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
steam
|
|
||||||
</a>
|
|
||||||
<span>•</span>
|
|
||||||
<a
|
|
||||||
className="hover:underline"
|
|
||||||
href="https://medal.tv/u/alexav"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
medal
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="text-2xl">
|
<div className="flex flex-col">
|
||||||
<div>
|
<h1 className="text-2xl font-bold">links</h1>
|
||||||
{" "}
|
<table className="border border-white border-solid sm:w-42 h-fit">
|
||||||
<span className="bg-black text-white px-1">shows</span> dexter,
|
<tr className="border-b border-white border-solid flex">
|
||||||
pitt, tlou, twd, ystone
|
<a
|
||||||
</div>
|
href="https://twitter.com/onelonesabre"
|
||||||
<div>
|
target="_blank"
|
||||||
<span className="bg-black text-white px-1">music</span> ptv,
|
className="hover:underline"
|
||||||
treaty oak, zach top, zach bryan, type o
|
>
|
||||||
</div>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr className="border-black" />
|
<hr className="border-black" />
|
||||||
<div className="px-2">
|
|
||||||
<div className="grid grid-cols-2">
|
<div>
|
||||||
<div>
|
<div className="grid grid-cols-2 mt-2">
|
||||||
|
<div className="px-2 pb-2">
|
||||||
<h1 className="text-2xl font-bold">about me</h1>
|
<h1 className="text-2xl font-bold">about me</h1>
|
||||||
<p>
|
<p>
|
||||||
born and raised buffalonian + wnyer. doing qa work for 4 years and
|
born and raised buffalonian + wnyer. doing qa work for 4 years and
|
||||||
@@ -104,20 +90,19 @@ const HomePage = () => {
|
|||||||
Buffalo. incredibly awkward, but that's besides the point
|
Buffalo. incredibly awkward, but that's besides the point
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="mx-auto">
|
<div className="text-2xl w-[200px] mx-auto my-auto">
|
||||||
<div className="p-2">
|
<div>
|
||||||
<div className="mb-2">
|
<span className="bg-black text-white px-1">shows</span> dexter,
|
||||||
<MusicComponent />
|
pitt, tlou, twd, yellowstone
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-2">
|
<div>
|
||||||
<StatModule />
|
<span className="bg-black text-white px-1">music</span> ptv, 5sos,
|
||||||
</div>
|
treaty oak, zach top, zach bryan
|
||||||
<div>
|
|
||||||
<GameComponent />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<MusicComponent />
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user