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; const { status, headers } = response;
if ( if (
!headers.has("content-type") || !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({ return NextResponse.json({
error: "We only support proxying JSON responses", error: "We only support proxying JSON responses",
@ -41,7 +42,7 @@ export async function GET(request: NextRequest) {
headers: { headers: {
"Access-Control-Allow-Origin": "*", "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 id = slug[0]; // The players id
const player = await scoresaberFetcher.lookupPlayer(id, false); const player = await scoresaberFetcher.lookupPlayer(id, false);
if (player === undefined) { 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 sort: ScoreSort = (slug[1] as ScoreSort) || "recent"; // The sorting method
const page = parseInt(slug[2]) || 1; // The page number const page = parseInt(slug[2]) || 1; // The page number
const player = await scoresaberFetcher.lookupPlayer(id, false); 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) { if (player == undefined) {
// Invalid player id // Invalid player id
@ -52,7 +58,12 @@ export default async function Search({ params: { slug } }: Props) {
return ( return (
<div className="flex flex-col h-full w-full"> <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> </div>
); );
} }

1
src/app/globals.css
View File

@ -54,6 +54,7 @@ body {
--chart-5: 27 87% 67%; --chart-5: 27 87% 67%;
--radius: 0.5rem; --radius: 0.5rem;
} }
.dark { .dark {
--background: 20 14.3% 4.1%; --background: 20 14.3% 4.1%;
--foreground: 60 9.1% 97.8%; --foreground: 60 9.1% 97.8%;

17
src/app/layout.tsx
View File

@ -45,12 +45,14 @@ export const metadata: Metadata = {
"Stream enhancement, Professional overlay, Easy to use overlay builder.", "Stream enhancement, Professional overlay, Easy to use overlay builder.",
openGraph: { openGraph: {
title: "Scoresaber Reloaded", 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", url: "https://ssr.fascinated.cc",
locale: "en_US", locale: "en_US",
type: "website", 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({ export default function RootLayout({
@ -60,13 +62,20 @@ export default function RootLayout({
}>) { }>) {
return ( return (
<html lang="en"> <html lang="en">
<body className={`${siteFont.className} antialiased w-full h-full relative`}> <body
className={`${siteFont.className} antialiased w-full h-full relative`}
>
<DatabaseLoader> <DatabaseLoader>
<Toaster /> <Toaster />
<BackgroundImage /> <BackgroundImage />
<PreloadResources /> <PreloadResources />
<TooltipProvider> <TooltipProvider>
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange> <ThemeProvider
attribute="class"
defaultTheme="dark"
enableSystem
disableTransitionOnChange
>
<QueryProvider> <QueryProvider>
<AnimatePresence> <AnimatePresence>
<main className="z-[9999] m-auto flex h-screen flex-col items-center md:max-w-[1200px]"> <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 * @param url the url to fetch
* @returns the fetched data * @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 { try {
return await ky return await ky
.get<T>(this.buildRequestUrl(useProxy, url), { .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 * @param useProxy whether to use the proxy or not
* @returns the map that match the query, or undefined if no map were found * @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(); const before = performance.now();
this.log(`Looking up map "${query}"...`); this.log(`Looking up map "${query}"...`);
let map = await db.beatSaverMaps.get(query); let map = await db.beatSaverMaps.get(query);
// The map is cached // The map is cached
if (map != undefined) { 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; 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 // Map not found
if (response == undefined) { if (response == undefined) {
return undefined; return undefined;
@ -47,7 +55,9 @@ class BeatSaverFetcher extends DataFetcher {
fullData: response, fullData: response,
}); });
map = await db.beatSaverMaps.get(query); 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; 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 * @param useProxy whether to use the proxy or not
* @returns the players that match the query, or undefined if no players were found * @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(); const before = performance.now();
this.log(`Searching for players matching "${query}"...`); this.log(`Searching for players matching "${query}"...`);
const results = await this.fetch<ScoreSaberPlayerSearch>( const results = await this.fetch<ScoreSaberPlayerSearch>(
useProxy, useProxy,
SEARCH_PLAYERS_ENDPOINT.replace(":query", query) SEARCH_PLAYERS_ENDPOINT.replace(":query", query),
); );
if (results === undefined) { if (results === undefined) {
return undefined; return undefined;
@ -37,7 +40,9 @@ class ScoreSaberFetcher extends DataFetcher {
return undefined; return undefined;
} }
results.players.sort((a, b) => a.rank - b.rank); 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; return results;
} }
@ -48,14 +53,22 @@ class ScoreSaberFetcher extends DataFetcher {
* @param useProxy whether to use the proxy or not * @param useProxy whether to use the proxy or not
* @returns the player that matches the ID, or undefined * @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(); const before = performance.now();
this.log(`Looking up player "${playerId}"...`); 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) { if (response === undefined) {
return 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; return response;
} }
@ -65,28 +78,40 @@ class ScoreSaberFetcher extends DataFetcher {
* @param playerId the ID of the player to look up * @param playerId the ID of the player to look up
* @param sort the sort to use * @param sort the sort to use
* @param page the page to get scores for * @param page the page to get scores for
* @param search
* @param useProxy whether to use the proxy or not * @param useProxy whether to use the proxy or not
* @returns the scores of the player, or undefined * @returns the scores of the player, or undefined
*/ */
async lookupPlayerScores( async lookupPlayerScores({
playerId: string, playerId,
sort: ScoreSort, sort,
page: number, page,
useProxy = true search,
): Promise<ScoreSaberPlayerScoresPage | undefined> { useProxy = true,
}: {
playerId: string;
sort: ScoreSort;
page: number;
search?: string;
useProxy?: boolean;
}): Promise<ScoreSaberPlayerScoresPage | undefined> {
const before = performance.now(); 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>( const response = await this.fetch<ScoreSaberPlayerScoresPage>(
useProxy, useProxy,
LOOKUP_PLAYER_SCORES_ENDPOINT.replace(":id", playerId) LOOKUP_PLAYER_SCORES_ENDPOINT.replace(":id", playerId)
.replace(":limit", 8 + "") .replace(":limit", 8 + "")
.replace(":sort", sort) .replace(":sort", sort)
.replace(":page", page.toString()) .replace(":page", page + "") + (search ? `&search=${search}` : ""),
); );
if (response === undefined) { if (response === undefined) {
return 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; return response;
} }
@ -102,18 +127,25 @@ class ScoreSaberFetcher extends DataFetcher {
async lookupLeaderboardScores( async lookupLeaderboardScores(
leaderboardId: string, leaderboardId: string,
page: number, page: number,
useProxy = true useProxy = true,
): Promise<ScoreSaberLeaderboardScoresPage | undefined> { ): Promise<ScoreSaberLeaderboardScoresPage | undefined> {
const before = performance.now(); 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>( const response = await this.fetch<ScoreSaberLeaderboardScoresPage>(
useProxy, 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) { if (response === undefined) {
return 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; 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) { for (const key in ranges) {
if (ranges[key] < Math.abs(secondsElapsed)) { if (ranges[key] < Math.abs(secondsElapsed)) {
const delta = secondsElapsed / ranges[key]; 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"; import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) { export function cn(...inputs: ClassValue[]) {

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

@ -6,7 +6,11 @@
* @param author the author of the song * @param author the author of the song
* @returns the YouTube link for 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="; const baseUrl = "https://www.youtube.com/results?search_query=";
let query = ""; let query = "";
if (name) { if (name) {

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

@ -9,7 +9,10 @@ export default function BackgroundImage() {
const database = useDatabase(); const database = useDatabase();
const settings = useLiveQuery(() => database.getSettings()); 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 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) { 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 ( return (
<g transform={`translate(${x},${y})`}> <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} {payload.value}
</text> </text>
</g> </g>

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

@ -6,6 +6,11 @@ type Props = {
export default function CountryFlag({ country, size = 24 }: Props) { export default function CountryFlag({ country, size = 24 }: Props) {
return ( return (
// eslint-disable-next-line @next/next/no-img-element // 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}
/>
); );
} }

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

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

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

@ -40,7 +40,10 @@ export default function SearchPlayer() {
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
{/* Search */} {/* Search */}
<Form {...form}> <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 <FormField
control={form.control} control={form.control}
name="username" name="username"
@ -48,7 +51,11 @@ export default function SearchPlayer() {
<FormItem> <FormItem>
<FormLabel>Username</FormLabel> <FormLabel>Username</FormLabel>
<FormControl> <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> </FormControl>
</FormItem> </FormItem>
)} )}
@ -79,7 +86,9 @@ export default function SearchPlayer() {
</Avatar> </Avatar>
<div> <div>
<p>{player.name}</p> <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> </div>
</Link> </Link>
); );

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

@ -7,7 +7,10 @@ import clsx from "clsx";
type Badge = { type Badge = {
name: string; name: string;
create: (score: ScoreSaberScore, leaderboard: ScoreSaberLeaderboard) => string | React.ReactNode | undefined; create: (
score: ScoreSaberScore,
leaderboard: ScoreSaberLeaderboard,
) => string | React.ReactNode | undefined;
}; };
const badges: Badge[] = [ const badges: Badge[] = [
@ -35,8 +38,16 @@ const badges: Badge[] = [
return ( return (
<> <>
<p>{fullCombo ? <span className="text-green-400">FC</span> : formatNumberWithCommas(score.missedNotes)}</p> <p>
<XMarkIcon className={clsx("w-5 h-5", fullCombo ? "hidden" : "text-red-400")} /> {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 { width } = useWindowDimensions();
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [currentScores, setCurrentScores] = useState<ScoreSaberLeaderboardScoresPage | undefined>(); const [currentScores, setCurrentScores] = useState<
ScoreSaberLeaderboardScoresPage | undefined
>();
const { const {
data: scores, data: scores,
@ -28,7 +30,11 @@ export default function LeaderboardScores({ leaderboard }: Props) {
refetch, refetch,
} = useQuery({ } = useQuery({
queryKey: ["playerScores", leaderboard.id, currentPage], 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 staleTime: 30 * 1000, // Cache data for 30 seconds
}); });
@ -47,23 +53,35 @@ export default function LeaderboardScores({ leaderboard }: Props) {
} }
return ( 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"> <Card className="flex gap-2 border border-input mt-2">
<div className="text-center"> <div className="text-center">
{isError && <p>Oopsies! Something went wrong.</p>} {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>
<div className="grid min-w-full grid-cols-1 divide-y divide-border"> <div className="grid min-w-full grid-cols-1 divide-y divide-border">
{currentScores.scores.map((playerScore, index) => ( {currentScores.scores.map((playerScore, index) => (
<LeaderboardScore key={index} score={playerScore} leaderboard={leaderboard} /> <LeaderboardScore
key={index}
score={playerScore}
leaderboard={leaderboard}
/>
))} ))}
</div> </div>
<Pagination <Pagination
mobilePagination={width < 768} mobilePagination={width < 768}
page={currentPage} page={currentPage}
totalPages={Math.ceil(currentScores.metadata.total / currentScores.metadata.itemsPerPage)} totalPages={Math.ceil(
currentScores.metadata.total / currentScores.metadata.itemsPerPage,
)}
loadingPage={isLoading ? currentPage : undefined} loadingPage={isLoading ? currentPage : undefined}
onPageChange={setCurrentPage} onPageChange={setCurrentPage}
/> />

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

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

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

@ -3,7 +3,10 @@ type BeatSaverLogoProps = {
className?: string; className?: string;
}; };
export default function BeatSaverLogo({ size = 32, className }: BeatSaverLogoProps) { export default function BeatSaverLogo({
size = 32,
className,
}: BeatSaverLogoProps) {
return ( return (
<svg <svg
xmlns="http://www.w3.org/2000/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"> <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 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 100,87 100,196" strokeLinejoin="round"></path>
<path d="M 26,77 85,106 53,130 Z" strokeLinejoin="round"></path> <path d="M 26,77 85,106 53,130 Z" strokeLinejoin="round"></path>
</g> </g>

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

@ -2,6 +2,12 @@ import Image from "next/image";
export default function ScoreSaberLogo() { export default function ScoreSaberLogo() {
return ( 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; className?: string;
}; };
export default function YouTubeLogo({ size = 32, className }: YouTubeLogoProps) { export default function YouTubeLogo({
size = 32,
className,
}: YouTubeLogoProps) {
return ( return (
<svg <svg
height={size} height={size}

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

@ -49,7 +49,9 @@ export default function Navbar() {
{/* Right-aligned item */} {/* Right-aligned item */}
<NavbarButton> <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> </NavbarButton>
</div> </div>
</div> </div>

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

@ -20,9 +20,15 @@ export default function ProfileButton() {
return ( return (
<NavbarButton> <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"> <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> </Avatar>
<p>You</p> <p>You</p>
</Link> </Link>

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

@ -18,7 +18,12 @@ type Props = {
page: number; 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; let player = initalPlayerData;
const { data, isLoading, isError } = useQuery({ const { data, isLoading, isError } = useQuery({
queryKey: ["player", player.id], queryKey: ["player", player.id],
@ -38,7 +43,12 @@ export default function PlayerData({ initialPlayerData: initalPlayerData, initia
<PlayerRankChart player={player} /> <PlayerRankChart player={player} />
</> </>
)} )}
<PlayerScores initialScoreData={initialScoreData} player={player} sort={sort} page={page} /> <PlayerScores
initialScoreData={initialScoreData}
player={player}
sort={sort}
page={page}
/>
</div> </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> <p className="font-bold text-2xl">{player.name}</p>
<div className="flex flex-col"> <div className="flex flex-col">
<div> <div>
{player.inactive && <p className="text-gray-400">Inactive Account</p>} {player.inactive && (
{player.banned && <p className="text-red-500">Banned Account</p>} <p className="text-gray-400">Inactive Account</p>
)}
{player.banned && (
<p className="text-red-500">Banned Account</p>
)}
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
{playerData.map((subName, index) => { {playerData.map((subName, index) => {
// Check if the player is inactive or banned and if the data should be shown // 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; 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 ScoreSaberPlayer from "@/common/data-fetcher/types/scoresaber/scoresaber-player";
import { formatNumberWithCommas } from "@/common/number-utils"; 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 { Line } from "react-chartjs-2";
import Card from "../card"; 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 = { export const options: any = {
maintainAspectRatio: false, maintainAspectRatio: false,

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

@ -59,14 +59,37 @@ type Props = {
page: number; 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 { width } = useWindowDimensions();
const controls = useAnimation(); 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 [previousPage, setPreviousPage] = useState(page);
const [currentPage, setCurrentPage] = useState(page); const [currentScores, setCurrentScores] = useState<
const [currentScores, setCurrentScores] = useState<ScoreSaberPlayerScoresPage | undefined>(initialScoreData); ScoreSaberPlayerScoresPage | undefined
>(initialScoreData);
const [searchQuery, setSearchQuery] = useState<string>();
const { const {
data: scores, data: scores,
@ -74,46 +97,58 @@ export default function PlayerScores({ initialScoreData, player, sort, page }: P
isLoading, isLoading,
refetch, refetch,
} = useQuery({ } = useQuery({
queryKey: ["playerScores", player.id, currentSort, currentPage], queryKey: ["playerScores", player.id, pageState],
queryFn: () => scoresaberFetcher.lookupPlayerScores(player.id, currentSort, currentPage), queryFn: () =>
scoresaberFetcher.lookupPlayerScores({
playerId: player.id,
sort: pageState.sort,
page: pageState.page,
}),
staleTime: 30 * 1000, // Cache data for 30 seconds staleTime: 30 * 1000, // Cache data for 30 seconds
}); });
const handleScoreLoad = useCallback(async () => { 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); setCurrentScores(scores);
await controls.start("visible"); 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(() => { useEffect(() => {
if (scores) { if (scores) {
handleScoreLoad(); handleScoreLoad();
} }
}, [scores]); }, [scores, isError]);
useEffect(() => { useEffect(() => {
const newUrl = `/player/${player.id}/${currentSort}/${currentPage}`; const newUrl = `/player/${player.id}/${pageState.sort}/${pageState.page}`;
window.history.replaceState({ ...window.history.state, as: newUrl, url: newUrl }, "", newUrl); window.history.replaceState(
{ ...window.history.state, as: newUrl, url: newUrl },
"",
newUrl,
);
refetch(); refetch();
}, [currentSort, currentPage, refetch, player.id]); }, [pageState, 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;
}
return ( return (
<Card className="flex gap-1"> <Card className="flex gap-1">
<div className="flex items-center flex-row w-full gap-2 justify-center"> <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) => ( {Object.values(scoreSort).map((sortOption, index) => (
<Button <Button
variant={sortOption.value === currentSort ? "default" : "outline"} variant={
sortOption.value === pageState.sort ? "default" : "outline"
}
key={index} key={index}
onClick={() => handleSortChange(sortOption.value)} onClick={() => handleSortChange(sortOption.value)}
size="sm" size="sm"
@ -125,9 +160,21 @@ export default function PlayerScores({ initialScoreData, player, sort, page }: P
))} ))}
</div> </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"> <div className="text-center">
{isError && <p>Oopsies! Something went wrong.</p>} {isError && <p>Oopsies! Something went wrong.</p>}
{currentScores.playerScores.length === 0 && <p>No scores found. Invalid Page?</p>} {currentScores.playerScores.length === 0 && (
<p>No scores found. Invalid Page?</p>
)}
</div> </div>
<motion.div <motion.div
@ -145,14 +192,19 @@ export default function PlayerScores({ initialScoreData, player, sort, page }: P
<Pagination <Pagination
mobilePagination={width < 768} mobilePagination={width < 768}
page={currentPage} page={pageState.page}
totalPages={Math.ceil(currentScores.metadata.total / currentScores.metadata.itemsPerPage)} totalPages={Math.ceil(
loadingPage={isLoading ? currentPage : undefined} currentScores.metadata.total /
currentScores.metadata.itemsPerPage,
)}
loadingPage={isLoading ? pageState.page : undefined}
onPageChange={(page) => { onPageChange={(page) => {
setPreviousPage(currentPage); setPreviousPage(pageState.page);
setCurrentPage(page); setPageState({ page, sort: pageState.sort });
}} }}
/> />
</>
)}
</Card> </Card>
); );
} }

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

@ -57,14 +57,23 @@ type Props = {
export default function PlayerStats({ player }: Props) { export default function PlayerStats({ player }: Props) {
return ( 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) => { {badges.map((badge, index) => {
const toRender = badge.create(player); const toRender = badge.create(player);
if (toRender === undefined) { if (toRender === undefined) {
return <div key={index} />; 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> </div>
); );

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

@ -8,7 +8,10 @@ type Props = {
setIsLeaderboardExpanded: Dispatch<SetStateAction<boolean>>; setIsLeaderboardExpanded: Dispatch<SetStateAction<boolean>>;
}; };
export default function LeaderboardButton({ isLeaderboardExpanded, setIsLeaderboardExpanded }: Props) { export default function LeaderboardButton({
isLeaderboardExpanded,
setIsLeaderboardExpanded,
}: Props) {
return ( return (
<div className="pr-2 flex items-center justify-center h-full"> <div className="pr-2 flex items-center justify-center h-full">
<Button <Button
@ -17,7 +20,10 @@ export default function LeaderboardButton({ isLeaderboardExpanded, setIsLeaderbo
onClick={() => setIsLeaderboardExpanded(!isLeaderboardExpanded)} onClick={() => setIsLeaderboardExpanded(!isLeaderboardExpanded)}
> >
<ArrowDownIcon <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> </Button>
</div> </div>

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

@ -53,7 +53,10 @@ export default function ScoreButtons({
{/* Open map in BeatSaver */} {/* Open map in BeatSaver */}
<ScoreButton <ScoreButton
onClick={() => { 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>} tooltip={<p>Click to open the map</p>}
> >
@ -66,8 +69,12 @@ export default function ScoreButtons({
<ScoreButton <ScoreButton
onClick={() => { onClick={() => {
window.open( window.open(
songNameToYouTubeLink(leaderboard.songName, leaderboard.songSubName, leaderboard.songAuthorName), songNameToYouTubeLink(
"_blank" leaderboard.songName,
leaderboard.songSubName,
leaderboard.songAuthorName,
),
"_blank",
); );
}} }}
tooltip={<p>Click to open the song in YouTube</p>} 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) { export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
const diff = getDifficultyFromScoreSaberDifficulty(leaderboard.difficulty.difficulty); const diff = getDifficultyFromScoreSaberDifficulty(
leaderboard.difficulty.difficulty,
);
const mappersProfile = 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 ( return (
<div className="flex gap-3 items-center"> <div className="flex gap-3 items-center">
@ -68,7 +72,13 @@ export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
</p> </p>
<p className="text-sm text-gray-400">{leaderboard.songAuthorName}</p> <p className="text-sm text-gray-400">{leaderboard.songAuthorName}</p>
<FallbackLink href={mappersProfile}> <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} {leaderboard.levelAuthorName}
</p> </p>
</FallbackLink> </FallbackLink>

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

@ -7,7 +7,10 @@ import clsx from "clsx";
type Badge = { type Badge = {
name: string; name: string;
create: (score: ScoreSaberScore, leaderboard: ScoreSaberLeaderboard) => string | React.ReactNode | undefined; create: (
score: ScoreSaberScore,
leaderboard: ScoreSaberLeaderboard,
) => string | React.ReactNode | undefined;
}; };
const badges: Badge[] = [ const badges: Badge[] = [
@ -49,8 +52,16 @@ const badges: Badge[] = [
return ( return (
<> <>
<p>{fullCombo ? <span className="text-green-400">FC</span> : formatNumberWithCommas(score.missedNotes)}</p> <p>
<XMarkIcon className={clsx("w-5 h-5", fullCombo ? "hidden" : "text-red-400")} /> {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(); const queryClient = new QueryClient();
export function QueryProvider({ children }: Props) { 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 <div
className={clsx( className={clsx(
"flex min-w-16 gap-2 h-[28px] p-1 items-center justify-center rounded-md text-sm", "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 && ( {name && (
@ -31,7 +31,9 @@ export default function StatValue({ name, color, value }: Props) {
<div className="h-4 w-[1px] bg-primary" /> <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> </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 = { type Props = {
/** /**

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

@ -11,7 +11,10 @@ const Avatar = React.forwardRef<
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<AvatarPrimitive.Root <AvatarPrimitive.Root
ref={ref} 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} {...props}
/> />
)); ));
@ -21,7 +24,11 @@ const AvatarImage = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Image>, React.ElementRef<typeof AvatarPrimitive.Image>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => ( >(({ 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; AvatarImage.displayName = AvatarPrimitive.Image.displayName;
@ -31,7 +38,10 @@ const AvatarFallback = React.forwardRef<
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<AvatarPrimitive.Fallback <AvatarPrimitive.Fallback
ref={ref} 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} {...props}
/> />
)); ));

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

@ -9,10 +9,14 @@ const buttonVariants = cva(
{ {
variants: { variants: {
variant: { variant: {
default: "bg-primary text-primary-foreground shadow hover:bg-primary/90", default:
destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", "bg-primary text-primary-foreground shadow hover:bg-primary/90",
outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground", destructive:
secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", "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", ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline", link: "text-primary underline-offset-4 hover:underline",
}, },
@ -27,7 +31,7 @@ const buttonVariants = cva(
variant: "default", variant: "default",
size: "default", size: "default",
}, },
} },
); );
export interface ButtonProps export interface ButtonProps
@ -39,8 +43,14 @@ export interface ButtonProps
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => { ({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"; 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"; 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"; import { cn } from "@/common/utils";
const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => ( const Card = React.forwardRef<
<div ref={ref} className={cn("rounded-xl border bg-card text-card-foreground shadow", className)} {...props} /> 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"; Card.displayName = "Card";
const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>( const CardHeader = React.forwardRef<
({ className, ...props }, ref) => ( HTMLDivElement,
<div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} /> 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"; CardHeader.displayName = "CardHeader";
const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>( const CardTitle = React.forwardRef<
({ className, ...props }, ref) => ( HTMLParagraphElement,
<h3 ref={ref} className={cn("font-semibold leading-none tracking-tight", className)} {...props} /> React.HTMLAttributes<HTMLHeadingElement>
) >(({ className, ...props }, ref) => (
); <h3
ref={ref}
className={cn("font-semibold leading-none tracking-tight", className)}
{...props}
/>
));
CardTitle.displayName = "CardTitle"; CardTitle.displayName = "CardTitle";
const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>( const CardDescription = React.forwardRef<
({ className, ...props }, ref) => ( HTMLParagraphElement,
<p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} /> React.HTMLAttributes<HTMLParagraphElement>
) >(({ className, ...props }, ref) => (
); <p
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
));
CardDescription.displayName = "CardDescription"; CardDescription.displayName = "CardDescription";
const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>( const CardContent = React.forwardRef<
({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} /> HTMLDivElement,
); React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
));
CardContent.displayName = "CardContent"; CardContent.displayName = "CardContent";
const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>( const CardFooter = React.forwardRef<
({ className, ...props }, ref) => <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} /> HTMLDivElement,
); React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex items-center p-6 pt-0", className)}
{...props}
/>
));
CardFooter.displayName = "CardFooter"; CardFooter.displayName = "CardFooter";
export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }; export {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
};

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

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

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

@ -2,21 +2,24 @@ import * as React from "react";
import { cn } from "@/common/utils"; 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) => { const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, ...props }, ref) => {
return ( return (
<input <input
type={type} type={type}
className={cn( 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", "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 className,
)} )}
ref={ref} ref={ref}
{...props} {...props}
/> />
); );
}); },
);
Input.displayName = "Input"; Input.displayName = "Input";
export { 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"; 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< const Label = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>, React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants> React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => ( >(({ 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; 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 * as React from "react";
import { cn } from "@/common/utils"; import { cn } from "@/common/utils";
@ -14,14 +18,22 @@ const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
); );
Pagination.displayName = "Pagination"; Pagination.displayName = "Pagination";
const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>( const PaginationContent = React.forwardRef<
({ className, ...props }, ref) => ( HTMLUListElement,
<ul ref={ref} className={cn("flex flex-row items-center gap-1", className)} {...props} /> React.ComponentProps<"ul">
) >(({ className, ...props }, ref) => (
); <ul
ref={ref}
className={cn("flex flex-row items-center gap-1", className)}
{...props}
/>
));
PaginationContent.displayName = "PaginationContent"; 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} /> <li ref={ref} className={cn("", className)} {...props} />
)); ));
PaginationItem.displayName = "PaginationItem"; PaginationItem.displayName = "PaginationItem";
@ -31,7 +43,12 @@ type PaginationLinkProps = {
} & Pick<ButtonProps, "size"> & } & Pick<ButtonProps, "size"> &
React.ComponentProps<"a">; React.ComponentProps<"a">;
const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => ( const PaginationLink = ({
className,
isActive,
size = "icon",
...props
}: PaginationLinkProps) => (
<a <a
aria-current={isActive ? "page" : undefined} aria-current={isActive ? "page" : undefined}
className={cn( className={cn(
@ -39,29 +56,52 @@ const PaginationLink = ({ className, isActive, size = "icon", ...props }: Pagina
variant: isActive ? "outline" : "ghost", variant: isActive ? "outline" : "ghost",
size, size,
}), }),
className className,
)} )}
{...props} {...props}
/> />
); );
PaginationLink.displayName = "PaginationLink"; PaginationLink.displayName = "PaginationLink";
const PaginationPrevious = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => ( const PaginationPrevious = ({
<PaginationLink aria-label="Go to previous page" size="default" className={cn("gap-1", className)} {...props}> 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" /> <ChevronLeftIcon className="h-4 w-4" />
</PaginationLink> </PaginationLink>
); );
PaginationPrevious.displayName = "PaginationPrevious"; PaginationPrevious.displayName = "PaginationPrevious";
const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => ( const PaginationNext = ({
<PaginationLink aria-label="Go to next page" size="default" className={cn("gap-1", className)} {...props}> 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" /> <ChevronRightIcon className="h-4 w-4" />
</PaginationLink> </PaginationLink>
); );
PaginationNext.displayName = "PaginationNext"; PaginationNext.displayName = "PaginationNext";
const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => ( const PaginationEllipsis = ({
<span aria-hidden className={cn("flex h-9 w-9 items-center justify-center", className)} {...props}> 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" /> <DotsHorizontalIcon className="h-4 w-4" />
<span className="sr-only">More pages</span> <span className="sr-only">More pages</span>
</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.ElementRef<typeof ScrollAreaPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => ( >(({ className, children, ...props }, ref) => (
<ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}> <ScrollAreaPrimitive.Root
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport> ref={ref}
className={cn("relative overflow-hidden", className)}
{...props}
>
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
{children}
</ScrollAreaPrimitive.Viewport>
<ScrollBar /> <ScrollBar />
<ScrollAreaPrimitive.Corner /> <ScrollAreaPrimitive.Corner />
</ScrollAreaPrimitive.Root> </ScrollAreaPrimitive.Root>
@ -26,9 +32,11 @@ const ScrollBar = React.forwardRef<
orientation={orientation} orientation={orientation}
className={cn( className={cn(
"flex touch-none select-none transition-colors", "flex touch-none select-none transition-colors",
orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]", orientation === "vertical" &&
orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]", "h-full w-2.5 border-l border-l-transparent p-[1px]",
className orientation === "horizontal" &&
"h-2.5 flex-col border-t border-t-transparent p-[1px]",
className,
)} )}
{...props} {...props}
> >

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

@ -17,7 +17,7 @@ const ToastViewport = React.forwardRef<
ref={ref} ref={ref}
className={cn( 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]", "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} {...props}
/> />
@ -30,20 +30,28 @@ const toastVariants = cva(
variants: { variants: {
variant: { variant: {
default: "border bg-secondary text-foreground", 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: { defaultVariants: {
variant: "default", variant: "default",
}, },
} },
); );
const Toast = React.forwardRef< const Toast = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Root>, 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) => { >(({ 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; Toast.displayName = ToastPrimitives.Root.displayName;
@ -55,7 +63,7 @@ const ToastAction = React.forwardRef<
ref={ref} ref={ref}
className={cn( 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", "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} {...props}
/> />
@ -70,7 +78,7 @@ const ToastClose = React.forwardRef<
ref={ref} ref={ref}
className={cn( 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", "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="" toast-close=""
{...props} {...props}
@ -84,7 +92,11 @@ const ToastTitle = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Title>, React.ElementRef<typeof ToastPrimitives.Title>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title> React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => ( >(({ 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; ToastTitle.displayName = ToastPrimitives.Title.displayName;
@ -92,7 +104,11 @@ const ToastDescription = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Description>, React.ElementRef<typeof ToastPrimitives.Description>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description> React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => ( >(({ 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; ToastDescription.displayName = ToastPrimitives.Description.displayName;

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

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

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

@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef<
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( 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", "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} {...props}
/> />

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

@ -82,7 +82,9 @@ export const reducer = (state: State, action: Action): State => {
case "UPDATE_TOAST": case "UPDATE_TOAST":
return { return {
...state, ...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": { case "DISMISS_TOAST": {
@ -106,7 +108,7 @@ export const reducer = (state: State, action: Action): State => {
...t, ...t,
open: false, open: false,
} }
: t : t,
), ),
}; };
} }

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

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