Fascinated/scoresaber-reloaded-v2
1
2
Fork 0
Code Issues 1 Pull Requests 10 Actions Activity

cleanup
All checks were successful
deploy / deploy (push) Successful in 56s
Details

Browse Source
This commit is contained in:
Lee 2023-10-20 18:23:49 +01:00
parent fbcf5f3651
commit 0f27952235
4 changed files with 48 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/not-found.tsx
View File

@ -1,3 +1,4 @@
import Card from "@/components/Card";
import Container from "@/components/Container"; import Container from "@/components/Container";
import { headers } from "next/headers"; import { headers } from "next/headers";
@ -6,14 +7,12 @@ export default async function NotFound() {
const domain = headersList.get("host"); const domain = headersList.get("host");
return ( return (
<Container> <Container>
<div className="flex h-full items-center justify-center"> <Card className="flex h-full items-center justify-center">
<div className="rounded-md bg-gray-800 p-3 text-center opacity-90"> <p className="text-xl font-bold text-red-500">404 Not Found</p>
<p className="text-xl font-bold text-red-500">404 Not Found</p> <p className="text-lg text-gray-300">
<p className="text-lg text-gray-300"> The page you requested does not exist.
The page you requested does not exist. </p>
</p> </Card>
</div>
</div>
</Container> </Container>
); );
} }

17
src/app/player/[id]/page.tsx
View File

@ -1,6 +1,7 @@
"use client"; "use client";
import Avatar from "@/components/Avatar"; import Avatar from "@/components/Avatar";
import Card from "@/components/Card";
import Container from "@/components/Container"; import Container from "@/components/Container";
import Label from "@/components/Label"; import Label from "@/components/Label";
import Pagination from "@/components/Pagination"; import Pagination from "@/components/Pagination";
@ -96,7 +97,7 @@ export default function Player({ params }: { params: { id: string } }) {
return ( return (
<main> <main>
<Container> <Container>
<div className="mt-2 flex w-full flex-col justify-center rounded-md bg-gray-800"> <Card className="mt-2">
<div className="p-3 text-center"> <div className="p-3 text-center">
<div role="status"> <div role="status">
{player.loading && <Spinner />} {player.loading && <Spinner />}
@ -115,7 +116,7 @@ export default function Player({ params }: { params: { id: string } }) {
)} )}
</div> </div>
</div> </div>
</div> </Card>
</Container> </Container>
</main> </main>
); );
@ -127,7 +128,7 @@ export default function Player({ params }: { params: { id: string } }) {
<main> <main>
<Container> <Container>
{/* Player Info */} {/* Player Info */}
<div className="mt-2 flex w-full flex-row justify-center rounded-md bg-gray-800 xs:flex-col"> <Card className="mt-2">
<div className="flex flex-col items-center gap-3 p-3 xs:flex-row xs:items-start"> <div className="flex flex-col items-center gap-3 p-3 xs:flex-row xs:items-start">
<div> <div>
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
@ -185,11 +186,11 @@ export default function Player({ params }: { params: { id: string } }) {
</div> </div>
</div> </div>
</div> </div>
</div> </Card>
{/* Scores */} {/* Scores */}
<div className="mt-2 flex w-full flex-row justify-center rounded-md bg-gray-800 xs:flex-col"> <Card className="mt-2 w-full xs:flex-col">
<div className="p-3"> <div className="p-1">
{scores.loading ? ( {scores.loading ? (
<div className="flex justify-center"> <div className="flex justify-center">
<Spinner /> <Spinner />
@ -207,7 +208,7 @@ export default function Player({ params }: { params: { id: string } }) {
className="grid grid-cols-[.95fr_6fr_3fr] pb-2 pt-2" className="grid grid-cols-[.95fr_6fr_3fr] pb-2 pt-2"
key={id} key={id}
> >
<div className="ml-4 flex flex-col items-start justify-center"> <div className="ml-3 flex flex-col items-start justify-center">
<div className="flex flex-row items-center justify-start gap-1"> <div className="flex flex-row items-center justify-start gap-1">
<GlobeAsiaAustraliaIcon width={20} height={20} /> <GlobeAsiaAustraliaIcon width={20} height={20} />
<p>#{score.rank}</p> <p>#{score.rank}</p>
@ -267,7 +268,7 @@ export default function Player({ params }: { params: { id: string } }) {
/> />
</div> </div>
</div> </div>
</div> </Card>
</Container> </Container>
</main> </main>
); );

8
src/app/search/page.tsx
View File

@ -1,4 +1,5 @@
import Avatar from "@/components/Avatar"; import Avatar from "@/components/Avatar";
import Card from "@/components/Card";
import Container from "@/components/Container"; import Container from "@/components/Container";
import SearchPlayer from "@/components/SearchPlayer"; import SearchPlayer from "@/components/SearchPlayer";
@ -12,7 +13,10 @@ export default function Home() {
return ( return (
<main> <main>
<Container> <Container>
<div className="mt-2 flex w-full flex-col items-center justify-center rounded-md bg-gray-800"> <Card
className="mt-2 w-full rounded-md bg-gray-800 text-center"
innerClassName="flex flex-col items-center justify-center"
>
<Avatar <Avatar
className="m-6" className="m-6"
label="Player Avatar" label="Player Avatar"
@ -25,7 +29,7 @@ export default function Home() {
<SearchPlayer /> <SearchPlayer />
<div className="mb-6"></div> <div className="mb-6"></div>
</div> </Card>
</Container> </Container>
</main> </main>
); );

26
src/components/Card.tsx Normal file
View File

@ -0,0 +1,26 @@
import clsx from "clsx";
type CardProps = {
className?: string;
innerClassName?: string;
children: React.ReactNode;
};
export default function Card({
className,
innerClassName,
children,
}: CardProps) {
return (
<div className={className}>
<div
className={clsx(
"rounded-md bg-gray-800 p-3 opacity-90",
innerClassName,
)}
>
{children}
</div>
</div>
);
}