This commit is contained in:
parent
70907395bb
commit
a1af814254
24
package-lock.json
generated
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}
|
||||||
|
79
src/components/ui/card.tsx
Normal file
79
src/components/ui/card.tsx
Normal file
@ -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 }
|
31
src/components/ui/separator.tsx
Normal file
31
src/components/ui/separator.tsx
Normal file
@ -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 }
|
Loading…
Reference in New Issue
Block a user