Fascinated/scoresaber-reloadedv3
Archived
1
1
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Activity

cleanup
Some checks failed
Deploy SSR / deploy (push) Failing after 1m21s
Details

Browse Source
This commit is contained in:
Lee 2024-09-13 13:45:04 +01:00
parent 983ccba37e
commit 281ee4a779
49 changed files with 903 additions and 378 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/(pages)/api/proxy/route.ts
View File

@ -21,7 +21,8 @@ export async function GET(request: NextRequest) {
const { status, headers } = response;
if (
!headers.has("content-type") ||
(headers.has("content-type") && !headers.get("content-type")?.includes("application/json"))
(headers.has("content-type") &&
!headers.get("content-type")?.includes("application/json"))
) {
return NextResponse.json({
error: "We only support proxying JSON responses",
@ -41,7 +42,7 @@ export async function GET(request: NextRequest) {
headers: {
"Access-Control-Allow-Origin": "*",
},
}
},
);
}
}

17
src/app/(pages)/player/[...slug]/page.tsx
View File

@ -12,7 +12,9 @@ type Props = {
};
};
export async function generateMetadata({ params: { slug } }: Props): Promise<Metadata> {
export async function generateMetadata({
params: { slug },
}: Props): Promise<Metadata> {
const id = slug[0]; // The players id
const player = await scoresaberFetcher.lookupPlayer(id, false);
if (player === undefined) {
@ -43,7 +45,11 @@ export default async function Search({ params: { slug } }: Props) {
const sort: ScoreSort = (slug[1] as ScoreSort) || "recent"; // The sorting method
const page = parseInt(slug[2]) || 1; // The page number
const player = await scoresaberFetcher.lookupPlayer(id, false);
const scores = await scoresaberFetcher.lookupPlayerScores(id, sort, page);
const scores = await scoresaberFetcher.lookupPlayerScores({
playerId: id,
sort,
page,
});
if (player == undefined) {
// Invalid player id
@ -52,7 +58,12 @@ export default async function Search({ params: { slug } }: Props) {
return (
<div className="flex flex-col h-full w-full">
<PlayerData initialPlayerData={player} initialScoreData={scores} sort={sort} page={page} />
<PlayerData
initialPlayerData={player}
initialScoreData={scores}
sort={sort}
page={page}
/>
</div>
);
}

131
src/app/globals.css
View File

@ -3,81 +3,82 @@
@tailwind utilities;
:root {
--background: #ffffff;
--foreground: #171717;
--background: #ffffff;
--foreground: #171717;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
}
@layer utilities {
.text-balance {
text-wrap: balance;
}
.text-balance {
text-wrap: balance;
}
}
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 20 14.3% 4.1%;
--card: 0 0% 100%;
--card-foreground: 20 14.3% 4.1%;
--popover: 0 0% 100%;
--popover-foreground: 20 14.3% 4.1%;
--primary: 24 9.8% 10%;
--primary-foreground: 60 9.1% 97.8%;
--secondary: 60 4.8% 95.9%;
--secondary-foreground: 24 9.8% 10%;
--muted: 60 4.8% 95.9%;
--muted-foreground: 25 5.3% 44.7%;
--accent: 60 4.8% 95.9%;
--accent-foreground: 24 9.8% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 60 9.1% 97.8%;
--border: 20 5.9% 90%;
--input: 20 5.9% 90%;
--ring: 20 14.3% 4.1%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
}
.dark {
--background: 20 14.3% 4.1%;
--foreground: 60 9.1% 97.8%;
--card: 20 14.3% 4.1%;
--card-foreground: 60 9.1% 97.8%;
--popover: 20 14.3% 4.1%;
--popover-foreground: 60 9.1% 97.8%;
--primary: 60 9.1% 97.8%;
--primary-foreground: 24 9.8% 10%;
--secondary: 12 6.5% 9.5%;
--secondary-foreground: 60 9.1% 97.8%;
--muted: 12 6.5% 15.1%;
--muted-foreground: 24 5.4% 63.9%;
--accent: 12 6.5% 15.1%;
--accent-foreground: 60 9.1% 97.8%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 60 9.1% 97.8%;
--border: 12 6.5% 15.1%;
--input: 12 6.5% 45.1%;
--ring: 24 5.7% 82.9%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
:root {
--background: 0 0% 100%;
--foreground: 20 14.3% 4.1%;
--card: 0 0% 100%;
--card-foreground: 20 14.3% 4.1%;
--popover: 0 0% 100%;
--popover-foreground: 20 14.3% 4.1%;
--primary: 24 9.8% 10%;
--primary-foreground: 60 9.1% 97.8%;
--secondary: 60 4.8% 95.9%;
--secondary-foreground: 24 9.8% 10%;
--muted: 60 4.8% 95.9%;
--muted-foreground: 25 5.3% 44.7%;
--accent: 60 4.8% 95.9%;
--accent-foreground: 24 9.8% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 60 9.1% 97.8%;
--border: 20 5.9% 90%;
--input: 20 5.9% 90%;
--ring: 20 14.3% 4.1%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
}
.dark {
--background: 20 14.3% 4.1%;
--foreground: 60 9.1% 97.8%;
--card: 20 14.3% 4.1%;
--card-foreground: 60 9.1% 97.8%;
--popover: 20 14.3% 4.1%;
--popover-foreground: 60 9.1% 97.8%;
--primary: 60 9.1% 97.8%;
--primary-foreground: 24 9.8% 10%;
--secondary: 12 6.5% 9.5%;
--secondary-foreground: 60 9.1% 97.8%;
--muted: 12 6.5% 15.1%;
--muted-foreground: 24 5.4% 63.9%;
--accent: 12 6.5% 15.1%;
--accent-foreground: 60 9.1% 97.8%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 60 9.1% 97.8%;
--border: 12 6.5% 15.1%;
--input: 12 6.5% 45.1%;
--ring: 24 5.7% 82.9%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
}

17
src/app/layout.tsx
View File

@ -45,12 +45,14 @@ export const metadata: Metadata = {
"Stream enhancement, Professional overlay, Easy to use overlay builder.",
openGraph: {
title: "Scoresaber Reloaded",
description: "Scoresaber Reloaded is a new way to view your scores and get more stats about your and your plays",
description:
"Scoresaber Reloaded is a new way to view your scores and get more stats about your and your plays",
url: "https://ssr.fascinated.cc",
locale: "en_US",
type: "website",
},
description: "Scoresaber Reloaded is a new way to view your scores and get more stats about your and your plays",
description:
"Scoresaber Reloaded is a new way to view your scores and get more stats about your and your plays",
};
export default function RootLayout({
@ -60,13 +62,20 @@ export default function RootLayout({
}>) {
return (
<html lang="en">
<body className={`${siteFont.className} antialiased w-full h-full relative`}>
<body
className={`${siteFont.className} antialiased w-full h-full relative`}
>
<DatabaseLoader>
<Toaster />
<BackgroundImage />
<PreloadResources />
<TooltipProvider>
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
<ThemeProvider
attribute="class"
defaultTheme="dark"
enableSystem
disableTransitionOnChange
>
<QueryProvider>
<AnimatePresence>
<main className="z-[9999] m-auto flex h-screen flex-col items-center md:max-w-[1200px]">

5
src/common/data-fetcher/data-fetcher.ts
View File

@ -38,7 +38,10 @@ export default class DataFetcher {
* @param url the url to fetch
* @returns the fetched data
*/
public async fetch<T>(useProxy: boolean, url: string): Promise<T | undefined> {
public async fetch<T>(
useProxy: boolean,
url: string,
): Promise<T | undefined> {
try {
return await ky
.get<T>(this.buildRequestUrl(useProxy, url), {

18
src/common/data-fetcher/impl/beatsaver.ts
View File

@ -18,18 +18,26 @@ class BeatSaverFetcher extends DataFetcher {
* @param useProxy whether to use the proxy or not
* @returns the map that match the query, or undefined if no map were found
*/
async lookupMap(query: string, useProxy = true): Promise<BeatSaverMap | undefined> {
async lookupMap(
query: string,
useProxy = true,
): Promise<BeatSaverMap | undefined> {
const before = performance.now();
this.log(`Looking up map "${query}"...`);
let map = await db.beatSaverMaps.get(query);
// The map is cached
if (map != undefined) {
this.log(`Found cached map "${query}" in ${(performance.now() - before).toFixed(0)}ms`);
this.log(
`Found cached map "${query}" in ${(performance.now() - before).toFixed(0)}ms`,
);
return map;
}
const response = await this.fetch<BSMap>(useProxy, LOOKUP_MAP_BY_HASH_ENDPOINT.replace(":query", query));
const response = await this.fetch<BSMap>(
useProxy,
LOOKUP_MAP_BY_HASH_ENDPOINT.replace(":query", query),
);
// Map not found
if (response == undefined) {
return undefined;
@ -47,7 +55,9 @@ class BeatSaverFetcher extends DataFetcher {
fullData: response,
});
map = await db.beatSaverMaps.get(query);
this.log(`Found map "${query}" in ${(performance.now() - before).toFixed(0)}ms`);
this.log(
`Found map "${query}" in ${(performance.now() - before).toFixed(0)}ms`,
);
return map;
}
}

70
src/common/data-fetcher/impl/scoresaber.ts
View File

@ -23,12 +23,15 @@ class ScoreSaberFetcher extends DataFetcher {
* @param useProxy whether to use the proxy or not
* @returns the players that match the query, or undefined if no players were found
*/
async searchPlayers(query: string, useProxy = true): Promise<ScoreSaberPlayerSearch | undefined> {
async searchPlayers(
query: string,
useProxy = true,
): Promise<ScoreSaberPlayerSearch | undefined> {
const before = performance.now();
this.log(`Searching for players matching "${query}"...`);
const results = await this.fetch<ScoreSaberPlayerSearch>(
useProxy,
SEARCH_PLAYERS_ENDPOINT.replace(":query", query)
SEARCH_PLAYERS_ENDPOINT.replace(":query", query),
);
if (results === undefined) {
return undefined;
@ -37,7 +40,9 @@ class ScoreSaberFetcher extends DataFetcher {
return undefined;
}
results.players.sort((a, b) => a.rank - b.rank);
this.log(`Found ${results.players.length} players in ${(performance.now() - before).toFixed(0)}ms`);
this.log(
`Found ${results.players.length} players in ${(performance.now() - before).toFixed(0)}ms`,
);
return results;
}
@ -48,14 +53,22 @@ class ScoreSaberFetcher extends DataFetcher {
* @param useProxy whether to use the proxy or not
* @returns the player that matches the ID, or undefined
*/
async lookupPlayer(playerId: string, useProxy = true): Promise<ScoreSaberPlayer | undefined> {
async lookupPlayer(
playerId: string,
useProxy = true,
): Promise<ScoreSaberPlayer | undefined> {
const before = performance.now();
this.log(`Looking up player "${playerId}"...`);
const response = await this.fetch<ScoreSaberPlayer>(useProxy, LOOKUP_PLAYER_ENDPOINT.replace(":id", playerId));
const response = await this.fetch<ScoreSaberPlayer>(
useProxy,
LOOKUP_PLAYER_ENDPOINT.replace(":id", playerId),
);
if (response === undefined) {
return undefined;
}
this.log(`Found player "${playerId}" in ${(performance.now() - before).toFixed(0)}ms`);
this.log(
`Found player "${playerId}" in ${(performance.now() - before).toFixed(0)}ms`,
);
return response;
}
@ -65,28 +78,40 @@ class ScoreSaberFetcher extends DataFetcher {
* @param playerId the ID of the player to look up
* @param sort the sort to use
* @param page the page to get scores for
* @param search
* @param useProxy whether to use the proxy or not
* @returns the scores of the player, or undefined
*/
async lookupPlayerScores(
playerId: string,
sort: ScoreSort,
page: number,
useProxy = true
): Promise<ScoreSaberPlayerScoresPage | undefined> {
async lookupPlayerScores({
playerId,
sort,
page,
search,
useProxy = true,
}: {
playerId: string;
sort: ScoreSort;
page: number;
search?: string;
useProxy?: boolean;
}): Promise<ScoreSaberPlayerScoresPage | undefined> {
const before = performance.now();
this.log(`Looking up scores for player "${playerId}", sort "${sort}", page "${page}"...`);
this.log(
`Looking up scores for player "${playerId}", sort "${sort}", page "${page}"${search ? `, search "${search}"` : ""}...`,
);
const response = await this.fetch<ScoreSaberPlayerScoresPage>(
useProxy,
LOOKUP_PLAYER_SCORES_ENDPOINT.replace(":id", playerId)
.replace(":limit", 8 + "")
.replace(":sort", sort)
.replace(":page", page.toString())
.replace(":page", page + "") + (search ? `&search=${search}` : ""),
);
if (response === undefined) {
return undefined;
}
this.log(`Found scores for player "${playerId}" in ${(performance.now() - before).toFixed(0)}ms`);
this.log(
`Found scores for player "${playerId}" in ${(performance.now() - before).toFixed(0)}ms`,
);
return response;
}
@ -102,18 +127,25 @@ class ScoreSaberFetcher extends DataFetcher {
async lookupLeaderboardScores(
leaderboardId: string,
page: number,
useProxy = true
useProxy = true,
): Promise<ScoreSaberLeaderboardScoresPage | undefined> {
const before = performance.now();
this.log(`Looking up scores for leaderboard "${leaderboardId}", page "${page}"...`);
this.log(
`Looking up scores for leaderboard "${leaderboardId}", page "${page}"...`,
);
const response = await this.fetch<ScoreSaberLeaderboardScoresPage>(
useProxy,
LOOKUP_LEADERBOARD_SCORES_ENDPOINT.replace(":id", leaderboardId).replace(":page", page.toString())
LOOKUP_LEADERBOARD_SCORES_ENDPOINT.replace(":id", leaderboardId).replace(
":page",
page.toString(),
),
);
if (response === undefined) {
return undefined;
}
this.log(`Found scores for leaderboard "${leaderboardId}" in ${(performance.now() - before).toFixed(0)}ms`);
this.log(
`Found scores for leaderboard "${leaderboardId}" in ${(performance.now() - before).toFixed(0)}ms`,
);
return response;
}
}

5
src/common/time-utils.ts
View File

@ -20,7 +20,10 @@ export function timeAgo(input: Date | number) {
for (const key in ranges) {
if (ranges[key] < Math.abs(secondsElapsed)) {
const delta = secondsElapsed / ranges[key];
return formatter.format(Math.round(delta), key as Intl.RelativeTimeFormatUnit);
return formatter.format(
Math.round(delta),
key as Intl.RelativeTimeFormatUnit,
);
}
}
}

2
src/common/utils.ts
View File

@ -1,4 +1,4 @@
import { clsx, type ClassValue } from "clsx";
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {

6
src/common/youtube-utils.ts
View File

@ -6,7 +6,11 @@
* @param author the author of the song
* @returns the YouTube link for the song
*/
export function songNameToYouTubeLink(name: string, songSubName: string, author: string) {
export function songNameToYouTubeLink(
name: string,
songSubName: string,
author: string,
) {
const baseUrl = "https://www.youtube.com/results?search_query=";
let query = "";
if (name) {

5
src/components/background-image.tsx
View File

@ -9,7 +9,10 @@ export default function BackgroundImage() {
const database = useDatabase();
const settings = useLiveQuery(() => database.getSettings());
if (settings?.backgroundImage == undefined || settings?.backgroundImage == "") {
if (
settings?.backgroundImage == undefined ||
settings?.backgroundImage == ""
) {
return null; // Don't render anything if the background image is not set
}

11
src/components/card.tsx
View File

@ -6,5 +6,14 @@ type Props = {
};
export default function Card({ children, className }: Props) {
return <div className={clsx("flex flex-col bg-secondary/90 p-3 rounded-md", className)}>{children}</div>;
return (
<div
className={clsx(
"flex flex-col bg-secondary/90 p-3 rounded-md",
className,
)}
>
{children}
</div>
);
}

9
src/components/chart/customized-axis-tick.tsx
View File

@ -12,7 +12,14 @@ export const CustomizedAxisTick = ({
}) => {
return (
<g transform={`translate(${x},${y})`}>
<text x={0} y={0} dy={16} textAnchor="end" fill="#666" transform={`rotate(${rotateAngle})`}>
<text
x={0}
y={0}
dy={16}
textAnchor="end"
fill="#666"
transform={`rotate(${rotateAngle})`}
>
{payload.value}
</text>
</g>

7
src/components/country-flag.tsx
View File

@ -6,6 +6,11 @@ type Props = {
export default function CountryFlag({ country, size = 24 }: Props) {
return (
// eslint-disable-next-line @next/next/no-img-element
<img alt="Player Country" src={`/assets/flags/${country}.png`} width={size * 2} height={size} />
<img
alt="Player Country"
src={`/assets/flags/${country}.png`}
width={size * 2}
height={size}
/>
);
}

77
src/components/input/pagination.tsx
View File

@ -2,13 +2,13 @@ import { ArrowPathIcon } from "@heroicons/react/24/solid";
import clsx from "clsx";
import { useEffect, useState } from "react";
import {
Pagination as ShadCnPagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
Pagination as ShadCnPagination,
} from "../ui/pagination";
type PaginationItemWrapperProps = {
@ -23,7 +23,10 @@ type PaginationItemWrapperProps = {
children: React.ReactNode;
};
function PaginationItemWrapper({ isLoadingPage, children }: PaginationItemWrapperProps) {
function PaginationItemWrapper({
isLoadingPage,
children,
}: PaginationItemWrapperProps) {
return (
<PaginationItem
className={clsx(isLoadingPage ? "cursor-not-allowed" : "cursor-pointer")}
@ -62,7 +65,13 @@ type Props = {
onPageChange: (page: number) => void;
};
export default function Pagination({ mobilePagination, page, totalPages, loadingPage, onPageChange }: Props) {
export default function Pagination({
mobilePagination,
page,
totalPages,
loadingPage,
onPageChange,
}: Props) {
totalPages = Math.round(totalPages);
const isLoading = loadingPage !== undefined;
const [currentPage, setCurrentPage] = useState(page);
@ -72,7 +81,12 @@ export default function Pagination({ mobilePagination, page, totalPages, loading
}, [page]);
const handlePageChange = (newPage: number) => {
if (newPage < 1 || newPage > totalPages || newPage == currentPage || isLoading) {
if (
newPage < 1 ||
newPage > totalPages ||
newPage == currentPage ||
isLoading
) {
return;
}
@ -95,15 +109,20 @@ export default function Pagination({ mobilePagination, page, totalPages, loading
pageNumbers.push(
<>
<PaginationItemWrapper key="start" isLoadingPage={isLoading}>
<PaginationLink onClick={() => handlePageChange(1)}>1</PaginationLink>
<PaginationLink onClick={() => handlePageChange(1)}>
1
</PaginationLink>
</PaginationItemWrapper>
{/* Only show ellipsis if more than 2 pages from the start */}
{startPage > 2 && (
<PaginationItemWrapper key="ellipsis-start" isLoadingPage={isLoading}>
<PaginationItemWrapper
key="ellipsis-start"
isLoadingPage={isLoading}
>
<PaginationEllipsis />
</PaginationItemWrapper>
)}
</>
</>,
);
}
@ -111,10 +130,17 @@ export default function Pagination({ mobilePagination, page, totalPages, loading
for (let i = startPage; i <= endPage; i++) {
pageNumbers.push(
<PaginationItemWrapper key={i} isLoadingPage={isLoading}>
<PaginationLink isActive={i === currentPage} onClick={() => handlePageChange(i)}>
{loadingPage === i ? <ArrowPathIcon className="w-4 h-4 animate-spin" /> : i}
<PaginationLink
isActive={i === currentPage}
onClick={() => handlePageChange(i)}
>
{loadingPage === i ? (
<ArrowPathIcon className="w-4 h-4 animate-spin" />
) : (
i
)}
</PaginationLink>
</PaginationItemWrapper>
</PaginationItemWrapper>,
);
}
@ -126,22 +152,31 @@ export default function Pagination({ mobilePagination, page, totalPages, loading
<PaginationContent>
{/* Previous button for mobile and desktop */}
<PaginationItemWrapper isLoadingPage={isLoading}>
<PaginationPrevious onClick={() => handlePageChange(currentPage - 1)} />
<PaginationPrevious
onClick={() => handlePageChange(currentPage - 1)}
/>
</PaginationItemWrapper>
{renderPageNumbers()}
{/* For desktop, show ellipsis and link to the last page */}
{!mobilePagination && currentPage < totalPages && totalPages - currentPage > 2 && (
<>
<PaginationItemWrapper key="ellipsis-end" isLoadingPage={isLoading}>
<PaginationEllipsis className="cursor-default" />
</PaginationItemWrapper>
<PaginationItemWrapper key="end" isLoadingPage={isLoading}>
<PaginationLink onClick={() => handlePageChange(totalPages)}>{totalPages}</PaginationLink>
</PaginationItemWrapper>
</>
)}
{!mobilePagination &&
currentPage < totalPages &&
totalPages - currentPage > 2 && (
<>
<PaginationItemWrapper
key="ellipsis-end"
isLoadingPage={isLoading}
>
<PaginationEllipsis className="cursor-default" />
</PaginationItemWrapper>
<PaginationItemWrapper key="end" isLoadingPage={isLoading}>
<PaginationLink onClick={() => handlePageChange(totalPages)}>
{totalPages}
</PaginationLink>
</PaginationItemWrapper>
</>
)}
{/* Next button for mobile and desktop */}
<PaginationItemWrapper isLoadingPage={isLoading}>

15
src/components/input/search-player.tsx
View File

@ -40,7 +40,10 @@ export default function SearchPlayer() {
<div className="flex flex-col gap-3">
{/* Search */}
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="flex items-end gap-2">
<form
onSubmit={form.handleSubmit(onSubmit)}
className="flex items-end gap-2"
>
<FormField
control={form.control}
name="username"
@ -48,7 +51,11 @@ export default function SearchPlayer() {
<FormItem>
<FormLabel>Username</FormLabel>
<FormControl>
<Input className="w-full sm:w-72 text-sm" placeholder="Query..." {...field} />
<Input
className="w-full sm:w-72 text-sm"
placeholder="Query..."
{...field}
/>
</FormControl>
</FormItem>
)}
@ -79,7 +86,9 @@ export default function SearchPlayer() {
</Avatar>
<div>
<p>{player.name}</p>
<p className="text-gray-400 text-sm">#{formatNumberWithCommas(player.rank)}</p>
<p className="text-gray-400 text-sm">
#{formatNumberWithCommas(player.rank)}
</p>
</div>
</Link>
);

17
src/components/leaderboard/leaderboard-score-stats.tsx
View File

@ -7,7 +7,10 @@ import clsx from "clsx";
type Badge = {
name: string;
create: (score: ScoreSaberScore, leaderboard: ScoreSaberLeaderboard) => string | React.ReactNode | undefined;
create: (
score: ScoreSaberScore,
leaderboard: ScoreSaberLeaderboard,
) => string | React.ReactNode | undefined;
};
const badges: Badge[] = [
@ -35,8 +38,16 @@ const badges: Badge[] = [
return (
<>
<p>{fullCombo ? <span className="text-green-400">FC</span> : formatNumberWithCommas(score.missedNotes)}</p>
<XMarkIcon className={clsx("w-5 h-5", fullCombo ? "hidden" : "text-red-400")} />
<p>
{fullCombo ? (
<span className="text-green-400">FC</span>
) : (
formatNumberWithCommas(score.missedNotes)
)}
</p>
<XMarkIcon
className={clsx("w-5 h-5", fullCombo ? "hidden" : "text-red-400")}
/>
</>
);
},

30
src/components/leaderboard/leaderboard-scores.tsx
View File

@ -19,7 +19,9 @@ export default function LeaderboardScores({ leaderboard }: Props) {
const { width } = useWindowDimensions();
const [currentPage, setCurrentPage] = useState(1);
const [currentScores, setCurrentScores] = useState<ScoreSaberLeaderboardScoresPage | undefined>();
const [currentScores, setCurrentScores] = useState<
ScoreSaberLeaderboardScoresPage | undefined
>();
const {
data: scores,
@ -28,7 +30,11 @@ export default function LeaderboardScores({ leaderboard }: Props) {
refetch,
} = useQuery({
queryKey: ["playerScores", leaderboard.id, currentPage],
queryFn: () => scoresaberFetcher.lookupLeaderboardScores(leaderboard.id + "", currentPage),
queryFn: () =>
scoresaberFetcher.lookupLeaderboardScores(
leaderboard.id + "",
currentPage,
),
staleTime: 30 * 1000, // Cache data for 30 seconds
});
@ -47,23 +53,35 @@ export default function LeaderboardScores({ leaderboard }: Props) {
}
return (
<motion.div initial={{ opacity: 0, y: -50 }} exit={{ opacity: 0, y: -50 }} animate={{ opacity: 1, y: 0 }}>
<motion.div
initial={{ opacity: 0, y: -50 }}
exit={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }}
>
<Card className="flex gap-2 border border-input mt-2">
<div className="text-center">
{isError && <p>Oopsies! Something went wrong.</p>}
{currentScores.scores.length === 0 && <p>No scores found. Invalid Page?</p>}
{currentScores.scores.length === 0 && (
<p>No scores found. Invalid Page?</p>
)}
</div>
<div className="grid min-w-full grid-cols-1 divide-y divide-border">
{currentScores.scores.map((playerScore, index) => (
<LeaderboardScore key={index} score={playerScore} leaderboard={leaderboard} />
<LeaderboardScore
key={index}
score={playerScore}
leaderboard={leaderboard}
/>
))}
</div>
<Pagination
mobilePagination={width < 768}
page={currentPage}
totalPages={Math.ceil(currentScores.metadata.total / currentScores.metadata.itemsPerPage)}
totalPages={Math.ceil(
currentScores.metadata.total / currentScores.metadata.itemsPerPage,
)}
loadingPage={isLoading ? currentPage : undefined}
onPageChange={setCurrentPage}
/>

6
src/components/loaders/database-loader.tsx
View File

@ -24,7 +24,11 @@ export default function DatabaseLoader({ children }: Props) {
return (
<DatabaseContext.Provider value={database}>
{database == undefined ? <FullscreenLoader reason="Loading database..." /> : children}
{database == undefined ? (
<FullscreenLoader reason="Loading database..." />
) : (
children
)}
</DatabaseContext.Provider>
);
}

10
src/components/logos/beatsaver-logo.tsx
View File

@ -3,7 +3,10 @@ type BeatSaverLogoProps = {
className?: string;
};
export default function BeatSaverLogo({ size = 32, className }: BeatSaverLogoProps) {
export default function BeatSaverLogo({
size = 32,
className,
}: BeatSaverLogoProps) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
@ -15,7 +18,10 @@ export default function BeatSaverLogo({ size = 32, className }: BeatSaverLogoPro
>
<g fill="none" stroke="#fff" strokeWidth="10">
<path d="M 100,7 189,47 100,87 12,47 Z" strokeLinejoin="round"></path>
<path d="M 189,47 189,155 100,196 12,155 12,47" strokeLinejoin="round"></path>
<path
d="M 189,47 189,155 100,196 12,155 12,47"
strokeLinejoin="round"
></path>
<path d="M 100,87 100,196" strokeLinejoin="round"></path>
<path d="M 26,77 85,106 53,130 Z" strokeLinejoin="round"></path>
</g>

8
src/components/logos/scoresaber-logo.tsx
View File

@ -2,6 +2,12 @@ import Image from "next/image";
export default function ScoreSaberLogo() {
return (
<Image width={32} height={32} unoptimized src={"/assets/logos/scoresaber.png"} alt={"ScoreSaber Logo"}></Image>
<Image
width={32}
height={32}
unoptimized
src={"/assets/logos/scoresaber.png"}
alt={"ScoreSaber Logo"}
></Image>
);
}

5
src/components/logos/youtube-logo.tsx
View File

@ -3,7 +3,10 @@ type YouTubeLogoProps = {
className?: string;
};
export default function YouTubeLogo({ size = 32, className }: YouTubeLogoProps) {
export default function YouTubeLogo({
size = 32,
className,
}: YouTubeLogoProps) {
return (
<svg
height={size}

4
src/components/navbar/navbar.tsx
View File

@ -49,7 +49,9 @@ export default function Navbar() {
{/* Right-aligned item */}
<NavbarButton>
<Link href={items[items.length - 1].link}>{renderNavbarItem(items[items.length - 1])}</Link>
<Link href={items[items.length - 1].link}>
{renderNavbarItem(items[items.length - 1])}
</Link>
</NavbarButton>
</div>
</div>

10
src/components/navbar/profile-button.tsx
View File

@ -20,9 +20,15 @@ export default function ProfileButton() {
return (
<NavbarButton>
<Link href={`/player/${settings.playerId}`} className="flex items-center gap-2">
<Link
href={`/player/${settings.playerId}`}
className="flex items-center gap-2"
>
<Avatar className="w-6 h-6">
<AvatarImage alt="Profile Picture" src={`https://cdn.scoresaber.com/avatars/${settings.playerId}.jpg`} />
<AvatarImage
alt="Profile Picture"
src={`https://cdn.scoresaber.com/avatars/${settings.playerId}.jpg`}
/>
</Avatar>
<p>You</p>
</Link>

14
src/components/player/player-data.tsx
View File

@ -18,7 +18,12 @@ type Props = {
page: number;
};
export default function PlayerData({ initialPlayerData: initalPlayerData, initialScoreData, sort, page }: Props) {
export default function PlayerData({
initialPlayerData: initalPlayerData,
initialScoreData,
sort,
page,
}: Props) {
let player = initalPlayerData;
const { data, isLoading, isError } = useQuery({
queryKey: ["player", player.id],
@ -38,7 +43,12 @@ export default function PlayerData({ initialPlayerData: initalPlayerData, initia
<PlayerRankChart player={player} />
</>
)}
<PlayerScores initialScoreData={initialScoreData} player={player} sort={sort} page={page} />
<PlayerScores
initialScoreData={initialScoreData}
player={player}
sort={sort}
page={page}
/>
</div>
);
}

13
src/components/player/player-header.tsx
View File

@ -50,13 +50,20 @@ export default function PlayerHeader({ player }: Props) {
<p className="font-bold text-2xl">{player.name}</p>
<div className="flex flex-col">
<div>
{player.inactive && <p className="text-gray-400">Inactive Account</p>}
{player.banned && <p className="text-red-500">Banned Account</p>}
{player.inactive && (
<p className="text-gray-400">Inactive Account</p>
)}
{player.banned && (
<p className="text-red-500">Banned Account</p>
)}
</div>
<div className="flex gap-2">
{playerData.map((subName, index) => {
// Check if the player is inactive or banned and if the data should be shown
if (!subName.showWhenInactiveOrBanned && (player.inactive || player.banned)) {
if (
!subName.showWhenInactiveOrBanned &&
(player.inactive || player.banned)
) {
return null;
}

21
src/components/player/player-rank-chart.tsx
View File

@ -3,11 +3,28 @@
import ScoreSaberPlayer from "@/common/data-fetcher/types/scoresaber/scoresaber-player";
import { formatNumberWithCommas } from "@/common/number-utils";
import { CategoryScale, Chart, Legend, LinearScale, LineElement, PointElement, Title, Tooltip } from "chart.js";
import {
CategoryScale,
Chart,
Legend,
LinearScale,
LineElement,
PointElement,
Title,
Tooltip,
} from "chart.js";
import { Line } from "react-chartjs-2";
import Card from "../card";
Chart.register(LinearScale, CategoryScale, PointElement, LineElement, Title, Tooltip, Legend);
Chart.register(
LinearScale,
CategoryScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
);
export const options: any = {
maintainAspectRatio: false,

178
src/components/player/player-scores.tsx
View File

@ -59,14 +59,37 @@ type Props = {
page: number;
};
export default function PlayerScores({ initialScoreData, player, sort, page }: Props) {
type PageState = {
/**
* The current page
*/
page: number;
/**
* The current sort
*/
sort: ScoreSort;
};
export default function PlayerScores({
initialScoreData,
player,
sort,
page,
}: Props) {
const { width } = useWindowDimensions();
const controls = useAnimation();
const [currentSort, setCurrentSort] = useState(sort);
const [firstLoad, setFirstLoad] = useState(true);
const [pageState, setPageState] = useState<PageState>({
page: page,
sort: sort,
});
const [previousPage, setPreviousPage] = useState(page);
const [currentPage, setCurrentPage] = useState(page);
const [currentScores, setCurrentScores] = useState<ScoreSaberPlayerScoresPage | undefined>(initialScoreData);
const [currentScores, setCurrentScores] = useState<
ScoreSaberPlayerScoresPage | undefined
>(initialScoreData);
const [searchQuery, setSearchQuery] = useState<string>();
const {
data: scores,
@ -74,85 +97,114 @@ export default function PlayerScores({ initialScoreData, player, sort, page }: P
isLoading,
refetch,
} = useQuery({
queryKey: ["playerScores", player.id, currentSort, currentPage],
queryFn: () => scoresaberFetcher.lookupPlayerScores(player.id, currentSort, currentPage),
queryKey: ["playerScores", player.id, pageState],
queryFn: () =>
scoresaberFetcher.lookupPlayerScores({
playerId: player.id,
sort: pageState.sort,
page: pageState.page,
}),
staleTime: 30 * 1000, // Cache data for 30 seconds
});
const handleScoreLoad = useCallback(async () => {
await controls.start(previousPage >= currentPage ? "hiddenRight" : "hiddenLeft");
setFirstLoad(false);
if (!firstLoad) {
await controls.start(
previousPage >= pageState.page ? "hiddenRight" : "hiddenLeft",
);
}
setCurrentScores(scores);
await controls.start("visible");
}, [scores, controls]);
}, [scores, controls, previousPage, firstLoad, pageState.page]);
const handleSortChange = (newSort: ScoreSort) => {
if (newSort !== pageState.sort) {
setPageState({ page: 1, sort: newSort });
}
};
useEffect(() => {
if (scores) {
handleScoreLoad();
}
}, [scores]);
}, [scores, isError]);
useEffect(() => {
const newUrl = `/player/${player.id}/${currentSort}/${currentPage}`;
window.history.replaceState({ ...window.history.state, as: newUrl, url: newUrl }, "", newUrl);
const newUrl = `/player/${player.id}/${pageState.sort}/${pageState.page}`;
window.history.replaceState(
{ ...window.history.state, as: newUrl, url: newUrl },
"",
newUrl,
);
refetch();
}, [currentSort, currentPage, refetch, player.id]);
const handleSortChange = (newSort: ScoreSort) => {
if (newSort !== currentSort) {
setCurrentSort(newSort);
setCurrentPage(1); // Reset page to 1 on sort change
}
};
if (currentScores === undefined) {
return undefined;
}
}, [pageState, refetch, player.id]);
return (
<Card className="flex gap-1">
<div className="flex items-center flex-row w-full gap-2 justify-center">
{Object.values(scoreSort).map((sortOption, index) => (
<Button
variant={sortOption.value === currentSort ? "default" : "outline"}
key={index}
onClick={() => handleSortChange(sortOption.value)}
size="sm"
className="flex items-center gap-1"
<div className="flex items-center flex-col w-full gap-2 justify-center relative">
<div className="flex items-center flex-row gap-2">
{Object.values(scoreSort).map((sortOption, index) => (
<Button
variant={
sortOption.value === pageState.sort ? "default" : "outline"
}
key={index}
onClick={() => handleSortChange(sortOption.value)}
size="sm"
className="flex items-center gap-1"
>
{sortOption.icon}
{`${capitalizeFirstLetter(sortOption.name)} Scores`}
</Button>
))}
</div>
{/* todo: add search */}
{/*<Input*/}
{/* type="search"*/}
{/* placeholder="Search..."*/}
{/* className="w-72 flex lg:absolute right-0 top-0"*/}
{/*/>*/}
</div>
{currentScores && (
<>
<div className="text-center">
{isError && <p>Oopsies! Something went wrong.</p>}
{currentScores.playerScores.length === 0 && (
<p>No scores found. Invalid Page?</p>
)}
</div>
<motion.div
initial="hidden"
animate={controls}
variants={scoreAnimation}
className="grid min-w-full grid-cols-1 divide-y divide-border"
>
{sortOption.icon}
{`${capitalizeFirstLetter(sortOption.name)} Scores`}
</Button>
))}
</div>
<div className="text-center">
{isError && <p>Oopsies! Something went wrong.</p>}
{currentScores.playerScores.length === 0 && <p>No scores found. Invalid Page?</p>}
</div>
<motion.div
initial="hidden"
animate={controls}
variants={scoreAnimation}
className="grid min-w-full grid-cols-1 divide-y divide-border"
>
{currentScores.playerScores.map((playerScore, index) => (
<motion.div key={index} variants={scoreAnimation}>
<Score playerScore={playerScore} />
{currentScores.playerScores.map((playerScore, index) => (
<motion.div key={index} variants={scoreAnimation}>
<Score playerScore={playerScore} />
</motion.div>
))}
</motion.div>
))}
</motion.div>
<Pagination
mobilePagination={width < 768}
page={currentPage}
totalPages={Math.ceil(currentScores.metadata.total / currentScores.metadata.itemsPerPage)}
loadingPage={isLoading ? currentPage : undefined}
onPageChange={(page) => {
setPreviousPage(currentPage);
setCurrentPage(page);
}}
/>
<Pagination
mobilePagination={width < 768}
page={pageState.page}
totalPages={Math.ceil(
currentScores.metadata.total /
currentScores.metadata.itemsPerPage,
)}
loadingPage={isLoading ? pageState.page : undefined}
onPageChange={(page) => {
setPreviousPage(pageState.page);
setPageState({ page, sort: pageState.sort });
}}
/>
</>
)}
</Card>
);
}

13
src/components/player/player-stats.tsx
View File

@ -57,14 +57,23 @@ type Props = {
export default function PlayerStats({ player }: Props) {
return (
<div className={`flex flex-wrap gap-2 w-full justify-center lg:justify-start`}>
<div
className={`flex flex-wrap gap-2 w-full justify-center lg:justify-start`}
>
{badges.map((badge, index) => {
const toRender = badge.create(player);
if (toRender === undefined) {
return <div key={index} />;
}
return <StatValue key={index} color={badge.color} name={badge.name} value={toRender} />;
return (
<StatValue
key={index}
color={badge.color}
name={badge.name}
value={toRender}
/>
);
})}
</div>
);

10
src/components/player/score/leaderboard-button.tsx
View File

@ -8,7 +8,10 @@ type Props = {
setIsLeaderboardExpanded: Dispatch<SetStateAction<boolean>>;
};
export default function LeaderboardButton({ isLeaderboardExpanded, setIsLeaderboardExpanded }: Props) {
export default function LeaderboardButton({
isLeaderboardExpanded,
setIsLeaderboardExpanded,
}: Props) {
return (
<div className="pr-2 flex items-center justify-center h-full">
<Button
@ -17,7 +20,10 @@ export default function LeaderboardButton({ isLeaderboardExpanded, setIsLeaderbo
onClick={() => setIsLeaderboardExpanded(!isLeaderboardExpanded)}
>
<ArrowDownIcon
className={clsx("w-6 h-6 transition-all transform-gpu", isLeaderboardExpanded ? "" : "rotate-180")}
className={clsx(
"w-6 h-6 transition-all transform-gpu",
isLeaderboardExpanded ? "" : "rotate-180",
)}
/>
</Button>
</div>

13
src/components/player/score/score-buttons.tsx
View File

@ -53,7 +53,10 @@ export default function ScoreButtons({
{/* Open map in BeatSaver */}
<ScoreButton
onClick={() => {
window.open(`https://beatsaver.com/maps/${beatSaverMap.bsr}`, "_blank");
window.open(
`https://beatsaver.com/maps/${beatSaverMap.bsr}`,
"_blank",
);
}}
tooltip={<p>Click to open the map</p>}
>
@ -66,8 +69,12 @@ export default function ScoreButtons({
<ScoreButton
onClick={() => {
window.open(
songNameToYouTubeLink(leaderboard.songName, leaderboard.songSubName, leaderboard.songAuthorName),
"_blank"
songNameToYouTubeLink(
leaderboard.songName,
leaderboard.songSubName,
leaderboard.songAuthorName,
),
"_blank",
);
}}
tooltip={<p>Click to open the song in YouTube</p>}

16
src/components/player/score/score-info.tsx
View File

@ -14,9 +14,13 @@ type Props = {
};
export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
const diff = getDifficultyFromScoreSaberDifficulty(leaderboard.difficulty.difficulty);
const diff = getDifficultyFromScoreSaberDifficulty(
leaderboard.difficulty.difficulty,
);
const mappersProfile =
beatSaverMap != undefined ? `https://beatsaver.com/profile/${beatSaverMap?.fullData.uploader.id}` : undefined;
beatSaverMap != undefined
? `https://beatsaver.com/profile/${beatSaverMap?.fullData.uploader.id}`
: undefined;
return (
<div className="flex gap-3 items-center">
@ -68,7 +72,13 @@ export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
</p>
<p className="text-sm text-gray-400">{leaderboard.songAuthorName}</p>
<FallbackLink href={mappersProfile}>
<p className={clsx("text-sm", mappersProfile && "hover:brightness-75 transform-gpu transition-all")}>
<p
className={clsx(
"text-sm",
mappersProfile &&
"hover:brightness-75 transform-gpu transition-all",
)}
>
{leaderboard.levelAuthorName}
</p>
</FallbackLink>

17
src/components/player/score/score-stats.tsx
View File

@ -7,7 +7,10 @@ import clsx from "clsx";
type Badge = {
name: string;
create: (score: ScoreSaberScore, leaderboard: ScoreSaberLeaderboard) => string | React.ReactNode | undefined;
create: (
score: ScoreSaberScore,
leaderboard: ScoreSaberLeaderboard,
) => string | React.ReactNode | undefined;
};
const badges: Badge[] = [
@ -49,8 +52,16 @@ const badges: Badge[] = [
return (
<>
<p>{fullCombo ? <span className="text-green-400">FC</span> : formatNumberWithCommas(score.missedNotes)}</p>
<XMarkIcon className={clsx("w-5 h-5", fullCombo ? "hidden" : "text-red-400")} />
<p>
{fullCombo ? (
<span className="text-green-400">FC</span>
) : (
formatNumberWithCommas(score.missedNotes)
)}
</p>
<XMarkIcon
className={clsx("w-5 h-5", fullCombo ? "hidden" : "text-red-400")}
/>
</>
);
},

4
src/components/providers/query-provider.tsx
View File

@ -9,5 +9,7 @@ type Props = {
const queryClient = new QueryClient();
export function QueryProvider({ children }: Props) {
return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
return (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
);
}

6
src/components/stat-value.tsx
View File

@ -22,7 +22,7 @@ export default function StatValue({ name, color, value }: Props) {
<div
className={clsx(
"flex min-w-16 gap-2 h-[28px] p-1 items-center justify-center rounded-md text-sm",
color ? color : "bg-accent"
color ? color : "bg-accent",
)}
>
{name && (
@ -31,7 +31,9 @@ export default function StatValue({ name, color, value }: Props) {
<div className="h-4 w-[1px] bg-primary" />
</>
)}
<div className="flex gap-1 items-center">{typeof value === "string" ? <p>{value}</p> : value}</div>
<div className="flex gap-1 items-center">
{typeof value === "string" ? <p>{value}</p> : value}
</div>
</div>
);
}

6
src/components/tooltip.tsx
View File

@ -1,4 +1,8 @@
import { Tooltip as ShadCnTooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
import {
Tooltip as ShadCnTooltip,
TooltipContent,
TooltipTrigger,
} from "./ui/tooltip";
type Props = {
/**

16
src/components/ui/avatar.tsx
View File

@ -11,7 +11,10 @@ const Avatar = React.forwardRef<
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Root
ref={ref}
className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
className={cn(
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
className,
)}
{...props}
/>
));
@ -21,7 +24,11 @@ const AvatarImage = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Image>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
<AvatarPrimitive.Image
ref={ref}
className={cn("aspect-square h-full w-full", className)}
{...props}
/>
));
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
@ -31,7 +38,10 @@ const AvatarFallback = React.forwardRef<
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Fallback
ref={ref}
className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
className={cn(
"flex h-full w-full items-center justify-center rounded-full bg-muted",
className,
)}
{...props}
/>
));

24
src/components/ui/button.tsx
View File

@ -9,10 +9,14 @@ const buttonVariants = cva(
{
variants: {
variant: {
default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
default:
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
destructive:
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
outline:
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
@ -27,7 +31,7 @@ const buttonVariants = cva(
variant: "default",
size: "default",
},
}
},
);
export interface ButtonProps
@ -39,8 +43,14 @@ export interface ButtonProps
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button";
return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
}
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
);
},
);
Button.displayName = "Button";

90
src/components/ui/card.tsx
View File

@ -2,40 +2,82 @@ import * as React from "react";
import { cn } from "@/common/utils";
const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("rounded-xl border bg-card text-card-foreground shadow", className)} {...props} />
const Card = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"rounded-xl border bg-card text-card-foreground shadow",
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} />
)
);
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("font-semibold leading-none tracking-tight", className)} {...props} />
)
);
const CardTitle = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h3
ref={ref}
className={cn("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} />
)
);
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} />
);
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} />
);
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, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
export {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
};

159
src/components/ui/form.tsx
View File

@ -3,7 +3,14 @@
import * as React from "react";
import * as LabelPrimitive from "@radix-ui/react-label";
import { Slot } from "@radix-ui/react-slot";
import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from "react-hook-form";
import {
Controller,
ControllerProps,
FieldPath,
FieldValues,
FormProvider,
useFormContext,
} from "react-hook-form";
import { cn } from "@/common/utils";
import { Label } from "@/components/ui/label";
@ -12,16 +19,18 @@ const Form = FormProvider;
type FormFieldContextValue<
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
> = {
name: TName;
};
const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
const FormFieldContext = React.createContext<FormFieldContextValue>(
{} as FormFieldContextValue,
);
const FormField = <
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
>({
...props
}: ControllerProps<TFieldValues, TName>) => {
@ -59,19 +68,22 @@ type FormItemContextValue = {
id: string;
};
const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
({ className, ...props }, ref) => {
const id = React.useId();
return (
<FormItemContext.Provider value={{ id }}>
<div ref={ref} className={cn("space-y-2", className)} {...props} />
</FormItemContext.Provider>
);
}
const FormItemContext = React.createContext<FormItemContextValue>(
{} as FormItemContextValue,
);
const FormItem = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
const id = React.useId();
return (
<FormItemContext.Provider value={{ id }}>
<div ref={ref} className={cn("space-y-2", className)} {...props} />
</FormItemContext.Provider>
);
});
FormItem.displayName = "FormItem";
const FormLabel = React.forwardRef<
@ -80,59 +92,88 @@ const FormLabel = React.forwardRef<
>(({ className, ...props }, ref) => {
const { error, formItemId } = useFormField();
return <Label ref={ref} className={cn(error && "text-destructive", className)} htmlFor={formItemId} {...props} />;
return (
<Label
ref={ref}
className={cn(error && "text-destructive", className)}
htmlFor={formItemId}
{...props}
/>
);
});
FormLabel.displayName = "FormLabel";
const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(
({ ...props }, ref) => {
const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
const FormControl = React.forwardRef<
React.ElementRef<typeof Slot>,
React.ComponentPropsWithoutRef<typeof Slot>
>(({ ...props }, ref) => {
const { error, formItemId, formDescriptionId, formMessageId } =
useFormField();
return (
<Slot
ref={ref}
id={formItemId}
aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
aria-invalid={!!error}
{...props}
/>
);
}
);
return (
<Slot
ref={ref}
id={formItemId}
aria-describedby={
!error
? `${formDescriptionId}`
: `${formDescriptionId} ${formMessageId}`
}
aria-invalid={!!error}
{...props}
/>
);
});
FormControl.displayName = "FormControl";
const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
({ className, ...props }, ref) => {
const { formDescriptionId } = useFormField();
const FormDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => {
const { formDescriptionId } = useFormField();
return (
<p ref={ref} id={formDescriptionId} className={cn("text-[0.8rem] text-muted-foreground", className)} {...props} />
);
}
);
return (
<p
ref={ref}
id={formDescriptionId}
className={cn("text-[0.8rem] text-muted-foreground", className)}
{...props}
/>
);
});
FormDescription.displayName = "FormDescription";
const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
({ className, children, ...props }, ref) => {
const { error, formMessageId } = useFormField();
const body = error ? String(error?.message) : children;
const FormMessage = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => {
const { error, formMessageId } = useFormField();
const body = error ? String(error?.message) : children;
if (!body) {
return null;
}
return (
<p
ref={ref}
id={formMessageId}
className={cn("text-[0.8rem] font-medium text-destructive", className)}
{...props}
>
{body}
</p>
);
if (!body) {
return null;
}
);
return (
<p
ref={ref}
id={formMessageId}
className={cn("text-[0.8rem] font-medium text-destructive", className)}
{...props}
>
{body}
</p>
);
});
FormMessage.displayName = "FormMessage";
export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };
export {
useFormField,
Form,
FormItem,
FormLabel,
FormControl,
FormDescription,
FormMessage,
FormField,
};

31
src/components/ui/input.tsx
View File

@ -2,21 +2,24 @@ import * as React from "react";
import { cn } from "@/common/utils";
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> {}
const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
return (
<input
type={type}
className={cn(
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
{...props}
/>
);
});
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, ...props }, ref) => {
return (
<input
type={type}
className={cn(
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
ref={ref}
{...props}
/>
);
},
);
Input.displayName = "Input";
export { Input };

13
src/components/ui/label.tsx
View File

@ -6,13 +6,20 @@ import * as React from "react";
import { cn } from "@/common/utils";
const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
const labelVariants = cva(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
);
const Label = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
<LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
<LabelPrimitive.Root
ref={ref}
className={cn(labelVariants(), className)}
{...props}
/>
));
Label.displayName = LabelPrimitive.Root.displayName;

70
src/components/ui/pagination.tsx
View File

@ -1,4 +1,8 @@
import { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons";
import {
ChevronLeftIcon,
ChevronRightIcon,
DotsHorizontalIcon,
} from "@radix-ui/react-icons";
import * as React from "react";
import { cn } from "@/common/utils";
@ -14,14 +18,22 @@ const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
);
Pagination.displayName = "Pagination";
const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
({ className, ...props }, ref) => (
<ul ref={ref} className={cn("flex flex-row items-center gap-1", className)} {...props} />
)
);
const PaginationContent = React.forwardRef<
HTMLUListElement,
React.ComponentProps<"ul">
>(({ className, ...props }, ref) => (
<ul
ref={ref}
className={cn("flex flex-row items-center gap-1", className)}
{...props}
/>
));
PaginationContent.displayName = "PaginationContent";
const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({ className, ...props }, ref) => (
const PaginationItem = React.forwardRef<
HTMLLIElement,
React.ComponentProps<"li">
>(({ className, ...props }, ref) => (
<li ref={ref} className={cn("", className)} {...props} />
));
PaginationItem.displayName = "PaginationItem";
@ -31,7 +43,12 @@ type PaginationLinkProps = {
} & Pick<ButtonProps, "size"> &
React.ComponentProps<"a">;
const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => (
const PaginationLink = ({
className,
isActive,
size = "icon",
...props
}: PaginationLinkProps) => (
<a
aria-current={isActive ? "page" : undefined}
className={cn(
@ -39,29 +56,52 @@ const PaginationLink = ({ className, isActive, size = "icon", ...props }: Pagina
variant: isActive ? "outline" : "ghost",
size,
}),
className
className,
)}
{...props}
/>
);
PaginationLink.displayName = "PaginationLink";
const PaginationPrevious = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
<PaginationLink aria-label="Go to previous page" size="default" className={cn("gap-1", className)} {...props}>
const PaginationPrevious = ({
className,
...props
}: React.ComponentProps<typeof PaginationLink>) => (
<PaginationLink
aria-label="Go to previous page"
size="default"
className={cn("gap-1", className)}
{...props}
>
<ChevronLeftIcon className="h-4 w-4" />
</PaginationLink>
);
PaginationPrevious.displayName = "PaginationPrevious";
const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
<PaginationLink aria-label="Go to next page" size="default" className={cn("gap-1", className)} {...props}>
const PaginationNext = ({
className,
...props
}: React.ComponentProps<typeof PaginationLink>) => (
<PaginationLink
aria-label="Go to next page"
size="default"
className={cn("gap-1", className)}
{...props}
>
<ChevronRightIcon className="h-4 w-4" />
</PaginationLink>
);
PaginationNext.displayName = "PaginationNext";
const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
<span aria-hidden className={cn("flex h-9 w-9 items-center justify-center", className)} {...props}>
const PaginationEllipsis = ({
className,
...props
}: React.ComponentProps<"span">) => (
<span
aria-hidden
className={cn("flex h-9 w-9 items-center justify-center", className)}
{...props}
>
<DotsHorizontalIcon className="h-4 w-4" />
<span className="sr-only">More pages</span>
</span>

18
src/components/ui/scroll-area.tsx
View File

@ -9,8 +9,14 @@ const ScrollArea = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
<ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
<ScrollAreaPrimitive.Root
ref={ref}
className={cn("relative overflow-hidden", className)}
{...props}
>
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
{children}
</ScrollAreaPrimitive.Viewport>
<ScrollBar />
<ScrollAreaPrimitive.Corner />
</ScrollAreaPrimitive.Root>
@ -26,9 +32,11 @@ const ScrollBar = React.forwardRef<
orientation={orientation}
className={cn(
"flex touch-none select-none transition-colors",
orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
className
orientation === "vertical" &&
"h-full w-2.5 border-l border-l-transparent p-[1px]",
orientation === "horizontal" &&
"h-2.5 flex-col border-t border-t-transparent p-[1px]",
className,
)}
{...props}
>

34
src/components/ui/toast.tsx
View File

@ -17,7 +17,7 @@ const ToastViewport = React.forwardRef<
ref={ref}
className={cn(
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
className
className,
)}
{...props}
/>
@ -30,20 +30,28 @@ const toastVariants = cva(
variants: {
variant: {
default: "border bg-secondary text-foreground",
destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
destructive:
"destructive group border-destructive bg-destructive text-destructive-foreground",
},
},
defaultVariants: {
variant: "default",
},
}
},
);
const Toast = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Root>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />;
return (
<ToastPrimitives.Root
ref={ref}
className={cn(toastVariants({ variant }), className)}
{...props}
/>
);
});
Toast.displayName = ToastPrimitives.Root.displayName;
@ -55,7 +63,7 @@ const ToastAction = React.forwardRef<
ref={ref}
className={cn(
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
className
className,
)}
{...props}
/>
@ -70,7 +78,7 @@ const ToastClose = React.forwardRef<
ref={ref}
className={cn(
"absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
className
className,
)}
toast-close=""
{...props}
@ -84,7 +92,11 @@ const ToastTitle = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Title>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
<ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold [&+div]:text-xs", className)} {...props} />
<ToastPrimitives.Title
ref={ref}
className={cn("text-sm font-semibold [&+div]:text-xs", className)}
{...props}
/>
));
ToastTitle.displayName = ToastPrimitives.Title.displayName;
@ -92,7 +104,11 @@ const ToastDescription = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Description>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
<ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
<ToastPrimitives.Description
ref={ref}
className={cn("text-sm opacity-90", className)}
{...props}
/>
));
ToastDescription.displayName = ToastPrimitives.Description.displayName;

13
src/components/ui/toaster.tsx
View File

@ -1,7 +1,14 @@
"use client";
import { useToast } from "@/hooks/use-toast";
import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast";
import {
Toast,
ToastClose,
ToastDescription,
ToastProvider,
ToastTitle,
ToastViewport,
} from "@/components/ui/toast";
export function Toaster() {
const { toasts } = useToast();
@ -13,7 +20,9 @@ export function Toaster() {
<Toast key={id} {...props}>
<div className="grid gap-1">
{title && <ToastTitle>{title}</ToastTitle>}
{description && <ToastDescription>{description}</ToastDescription>}
{description && (
<ToastDescription>{description}</ToastDescription>
)}
</div>
{action}
<ToastClose />

2
src/components/ui/tooltip.tsx
View File

@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef<
sideOffset={sideOffset}
className={cn(
"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
className,
)}
{...props}
/>

6
src/hooks/use-toast.ts
View File

@ -82,7 +82,9 @@ export const reducer = (state: State, action: Action): State => {
case "UPDATE_TOAST":
return {
...state,
toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
toasts: state.toasts.map((t) =>
t.id === action.toast.id ? { ...t, ...action.toast } : t,
),
};
case "DISMISS_TOAST": {
@ -106,7 +108,7 @@ export const reducer = (state: State, action: Action): State => {
...t,
open: false,
}
: t
: t,
),
};
}

4
src/hooks/use-window-dimensions.ts
View File

@ -9,7 +9,9 @@ function getWindowDimensions() {
}
export default function useWindowDimensions() {
const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
const [windowDimensions, setWindowDimensions] = useState(
getWindowDimensions(),
);
useEffect(() => {
function handleResize() {