update card
All checks were successful
deploy / deploy (push) Successful in 1m59s

This commit is contained in:
Lee 2023-10-30 16:53:55 +00:00
parent 70907395bb
commit a1af814254
13 changed files with 157 additions and 41 deletions

24
package-lock.json generated

@ -11,6 +11,7 @@
"@boiseitguru/cookie-cutter": "^0.2.1", "@boiseitguru/cookie-cutter": "^0.2.1",
"@heroicons/react": "^2.0.18", "@heroicons/react": "^2.0.18",
"@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-popover": "^1.0.7",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slider": "^1.1.2", "@radix-ui/react-slider": "^1.1.2",
"@radix-ui/react-tooltip": "^1.0.7", "@radix-ui/react-tooltip": "^1.0.7",
"@sentry/nextjs": "^7.74.1", "@sentry/nextjs": "^7.74.1",
@ -832,6 +833,29 @@
} }
} }
}, },
"node_modules/@radix-ui/react-separator": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.0.3.tgz",
"integrity": "sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-primitive": "1.0.3"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-slider": { "node_modules/@radix-ui/react-slider": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.1.2.tgz", "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.1.2.tgz",

@ -12,6 +12,7 @@
"@boiseitguru/cookie-cutter": "^0.2.1", "@boiseitguru/cookie-cutter": "^0.2.1",
"@heroicons/react": "^2.0.18", "@heroicons/react": "^2.0.18",
"@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-popover": "^1.0.7",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slider": "^1.1.2", "@radix-ui/react-slider": "^1.1.2",
"@radix-ui/react-tooltip": "^1.0.7", "@radix-ui/react-tooltip": "^1.0.7",
"@sentry/nextjs": "^7.74.1", "@sentry/nextjs": "^7.74.1",

@ -21,10 +21,7 @@ export default async function Analytics() {
return ( return (
<main> <main>
<Container> <Container>
<Card <Card>
className="mt-2 w-full rounded-md bg-gray-800"
innerClassName="flex flex-col items-center justify-center text-center"
>
<h1 className="mb-1 text-3xl font-bold">Credits</h1> <h1 className="mb-1 text-3xl font-bold">Credits</h1>
<p className="mb-8 text-gray-300"> <p className="mb-8 text-gray-300">
This website is made possible because of the following: This website is made possible because of the following:

@ -25,10 +25,7 @@ export default async function Analytics() {
return ( return (
<main> <main>
<Container> <Container>
<Card <Card>
className="mt-2 w-full rounded-md bg-gray-800"
innerClassName="flex flex-col items-center justify-center text-center"
>
<h1 className="mb-1 text-3xl font-bold">Privacy</h1> <h1 className="mb-1 text-3xl font-bold">Privacy</h1>
<p className="mb-8 text-gray-300"> <p className="mb-8 text-gray-300">
This site does not collect personal data. All of the data stored is This site does not collect personal data. All of the data stored is

@ -13,18 +13,13 @@ export default function Home() {
return ( return (
<main> <main>
<Container> <Container>
<Card <Card className="flex flex-col items-center justify-center">
className="mt-2 w-full rounded-md bg-gray-800"
innerClassName="flex flex-col items-center justify-center"
>
<UnknownAvatar /> <UnknownAvatar />
<p className="text-xl">Stranger</p> <p className="text-xl">Stranger</p>
<p className="text mt-2">Find a player profile</p> <p className="text mt-2">Find a player profile</p>
<SearchPlayer /> <SearchPlayer />
<div className="mb-6"></div>
</Card> </Card>
</Container> </Container>
</main> </main>

@ -1,26 +1,15 @@
import { Card as CardBase, CardContent } from "@/components/ui/card";
import clsx from "clsx"; import clsx from "clsx";
type CardProps = { type CardProps = {
className?: string; className?: string;
innerClassName?: string;
children: React.ReactNode; children: React.ReactNode;
}; };
export default function Card({ export default function Card({ className, children }: CardProps) {
className,
innerClassName,
children,
}: CardProps) {
return ( return (
<div className={className}> <CardBase className="mt-2">
<div <CardContent className={clsx(className, "mt-2")}>{children}</CardContent>
className={clsx( </CardBase>
"w-full rounded-md bg-gray-800 p-3 opacity-90",
innerClassName,
)}
>
{children}
</div>
</div>
); );
} }

@ -20,7 +20,7 @@ const buildId = process.env.NEXT_PUBLIC_BUILD_ID
export default function Footer() { export default function Footer() {
return ( return (
<footer> <footer>
<div className="m-3 flex flex-col items-center justify-center gap-1 rounded-md bg-gray-800 p-3"> <div className="bg-background m-3 flex flex-col items-center justify-center gap-1 rounded-md p-3">
<div className="flex flex-row gap-3"> <div className="flex flex-row gap-3">
<a <a
className="transform-gpu transition-all hover:text-blue-500" className="transform-gpu transition-all hover:text-blue-500"

@ -14,6 +14,7 @@ import Pagination from "./Pagination";
import Spinner from "./Spinner"; import Spinner from "./Spinner";
import PlayerRanking from "./player/PlayerRanking"; import PlayerRanking from "./player/PlayerRanking";
import PlayerRankingMobile from "./player/PlayerRankingMobile"; import PlayerRankingMobile from "./player/PlayerRankingMobile";
import { Separator } from "./ui/separator";
const Error = dynamic(() => import("@/components/Error")); const Error = dynamic(() => import("@/components/Error"));
@ -117,7 +118,7 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
</div> </div>
) : ( ) : (
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<div className="flex items-center gap-2 rounded-md bg-gray-700 p-2"> <div className="flex items-center gap-2 p-2">
{country && ( {country && (
<CountyFlag countryCode={country} className="!h-8 !w-8" /> <CountyFlag countryCode={country} className="!h-8 !w-8" />
)} )}
@ -129,6 +130,8 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
</p> </p>
</div> </div>
<Separator />
{!isMobile && ( {!isMobile && (
<table className="table w-full table-auto border-spacing-2 border-none text-left"> <table className="table w-full table-auto border-spacing-2 border-none text-left">
<thead> <thead>
@ -145,7 +148,7 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
{players.map((player) => ( {players.map((player) => (
<tr <tr
key={player.rank} key={player.rank}
className="border-b border-gray-700" className="border-b border-gray-800"
> >
<PlayerRanking <PlayerRanking
showCountryFlag={country ? false : true} showCountryFlag={country ? false : true}
@ -173,8 +176,8 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
)} )}
{/* Pagination */} {/* Pagination */}
<div className="flex w-full flex-row justify-center rounded-md bg-gray-800 md:flex-col"> <div className="flex w-full flex-row justify-center">
<div className="p-3"> <div className="pt-3">
<Pagination <Pagination
currentPage={pageInfo.page} currentPage={pageInfo.page}
totalPages={pageInfo.totalPages} totalPages={pageInfo.totalPages}

@ -48,7 +48,7 @@ export default function Navbar() {
return ( return (
<> <>
<div className="flex h-fit w-full rounded-md bg-gray-800"> <div className="bg-background flex h-fit w-full rounded-md">
{settingsStore !== undefined && settingsStore.player && ( {settingsStore !== undefined && settingsStore.player && (
<NavbarButton <NavbarButton
ariaLabel="Your profile" ariaLabel="Your profile"

@ -127,7 +127,7 @@ export default function Leaderboard({ id, page }: LeaderboardProps) {
</div> </div>
</Card> </Card>
<Card className="mt-2 h-fit"> <Card className="mt-2 h-fit">
<div className="flex justify-center gap-2"> <div className="mb-2 mt-2 flex justify-center gap-2">
{difficulties.map((diff) => { {difficulties.map((diff) => {
return ( return (
<div <div
@ -161,7 +161,7 @@ export default function Leaderboard({ id, page }: LeaderboardProps) {
{/* Pagination */} {/* Pagination */}
<div> <div>
<div className="p-3"> <div className="pt-3">
<Pagination <Pagination
currentPage={leaderboardScoredsData.page} currentPage={leaderboardScoredsData.page}
totalPages={leaderboardScoredsData.totalPages} totalPages={leaderboardScoredsData.totalPages}

@ -99,7 +99,7 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
return ( return (
<Card className="mt-2 w-full items-center md:flex-col"> <Card className="mt-2 w-full items-center md:flex-col">
{/* Sort */} {/* Sort */}
<div className="m-2 w-full text-sm"> <div className="m-4 w-full text-sm">
<div className="flex justify-center gap-2"> <div className="flex justify-center gap-2">
{Object.values(SortTypes).map((sortType) => { {Object.values(SortTypes).map((sortType) => {
return ( return (
@ -128,7 +128,7 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
<Spinner /> <Spinner />
</div> </div>
) : ( ) : (
<div className="grid grid-cols-1 divide-y divide-gray-500"> <div className="grid grid-cols-1 divide-y divide-gray-800">
{!scores.loading && scores.scores.length == 0 ? ( {!scores.loading && scores.scores.length == 0 ? (
<p className="text-red-400">{errorMessage}</p> <p className="text-red-400">{errorMessage}</p>
) : ( ) : (
@ -152,7 +152,7 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
{/* Pagination */} {/* Pagination */}
<div> <div>
<div className="p-3"> <div className="pt-3">
<Pagination <Pagination
currentPage={scores.page} currentPage={scores.page}
totalPages={scores.totalPages} totalPages={scores.totalPages}

@ -0,0 +1,79 @@
import * as React from "react"
import { cn } from "@/utils/utils"
const Card = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"rounded-lg border bg-card text-card-foreground shadow-sm",
className
)}
{...props}
/>
))
Card.displayName = "Card"
const CardHeader = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex flex-col space-y-1.5 p-6", className)}
{...props}
/>
))
CardHeader.displayName = "CardHeader"
const CardTitle = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h3
ref={ref}
className={cn(
"text-2xl font-semibold leading-none tracking-tight",
className
)}
{...props}
/>
))
CardTitle.displayName = "CardTitle"
const CardDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<p
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
CardDescription.displayName = "CardDescription"
const CardContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"
const CardFooter = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex items-center p-6 pt-0", className)}
{...props}
/>
))
CardFooter.displayName = "CardFooter"
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

@ -0,0 +1,31 @@
"use client"
import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"
import { cn } from "@/utils/utils"
const Separator = React.forwardRef<
React.ElementRef<typeof SeparatorPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(
(
{ className, orientation = "horizontal", decorative = true, ...props },
ref
) => (
<SeparatorPrimitive.Root
ref={ref}
decorative={decorative}
orientation={orientation}
className={cn(
"shrink-0 bg-border",
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
className
)}
{...props}
/>
)
)
Separator.displayName = SeparatorPrimitive.Root.displayName
export { Separator }