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

add hover to all country flags
All checks were successful
Deploy Website / deploy (push) Successful in 5m5s
Details

Browse Source
This commit is contained in:
Lee 2024-10-13 00:41:39 +01:00
parent b7783f5a4d
commit ae2f30a97a
3 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,6 @@
import Tooltip from "@/components/tooltip";
import { normalizedRegionName } from "@ssr/common/utils/region-utils";
type Props = { type Props = {
code: string; code: string;
size?: number; size?: number;
@ -5,12 +8,14 @@ type Props = {
export default function CountryFlag({ code, size = 24 }: Props) { export default function CountryFlag({ code, size = 24 }: Props) {
return ( return (
// eslint-disable-next-line @next/next/no-img-element <Tooltip display={<p>{normalizedRegionName(code)}</p>} asChild={false}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img <img
alt="Player Country" alt="Player Country"
src={`/assets/flags/${code.toLowerCase()}.png`} src={`/assets/flags/${code.toLowerCase()}.png`}
width={size * 2} width={size * 2}
className={`w-[${size * 2}px] object-contain`} className={`w-[${size * 2}px] object-contain`}
/> />
</Tooltip>
); );
} }

3
projects/website/src/components/player/player-header.tsx
View File

@ -11,6 +11,7 @@ import PlayerTrackedStatus from "@/components/player/player-tracked-status";
import ScoreSaberPlayer from "@ssr/common/types/player/impl/scoresaber-player"; import ScoreSaberPlayer from "@ssr/common/types/player/impl/scoresaber-player";
import Link from "next/link"; import Link from "next/link";
import { capitalizeFirstLetter } from "@/common/string-utils"; import { capitalizeFirstLetter } from "@/common/string-utils";
import { normalizedRegionName } from "@ssr/common/utils/region-utils";
/** /**
* Renders the change for a stat. * Renders the change for a stat.
@ -23,7 +24,7 @@ const renderDailyChange = (change: number, tooltip: ReactElement, format?: (valu
format = format ?? formatNumberWithCommas; format = format ?? formatNumberWithCommas;
return ( return (
<Tooltip display={tooltip}> <Tooltip display={tooltip} side="bottom">
<p className={`text-sm ${change > 0 ? "text-green-400" : "text-red-400"}`}> <p className={`text-sm ${change > 0 ? "text-green-400" : "text-red-400"}`}>
{change > 0 ? "+" : ""} {change > 0 ? "+" : ""}
{format(change)} {format(change)}

9
projects/website/src/components/tooltip.tsx
View File

@ -11,16 +11,21 @@ type Props = {
*/ */
display: React.ReactNode; display: React.ReactNode;
/**
* Display the trigger as a child element.
*/
asChild?: boolean;
/** /**
* Where the tooltip will be displayed * Where the tooltip will be displayed
*/ */
side?: "top" | "bottom" | "left" | "right"; side?: "top" | "bottom" | "left" | "right";
}; };
export default function Tooltip({ children, display, side = "top" }: Props) { export default function Tooltip({ children, display, asChild = true, side = "top" }: Props) {
return ( return (
<ShadCnTooltip> <ShadCnTooltip>
<TooltipTrigger asChild>{children}</TooltipTrigger> <TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
<TooltipContent side={side}>{display}</TooltipContent> <TooltipContent side={side}>{display}</TooltipContent>
</ShadCnTooltip> </ShadCnTooltip>
); );