From ae2f30a97aa42e5e9d815298393f189f29525e1a Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Sun, 13 Oct 2024 00:41:39 +0100
Subject: [PATCH] add hover to all country flags

---
 .../website/src/components/country-flag.tsx   | 19 ++++++++++++-------
 .../src/components/player/player-header.tsx   |  3 ++-
 projects/website/src/components/tooltip.tsx   |  9 +++++++--
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/projects/website/src/components/country-flag.tsx b/projects/website/src/components/country-flag.tsx
index 723db2d..6b538a2 100644
--- a/projects/website/src/components/country-flag.tsx
+++ b/projects/website/src/components/country-flag.tsx
@@ -1,3 +1,6 @@
+import Tooltip from "@/components/tooltip";
+import { normalizedRegionName } from "@ssr/common/utils/region-utils";
+
 type Props = {
   code: string;
   size?: number;
@@ -5,12 +8,14 @@ type Props = {
 
 export default function CountryFlag({ code, size = 24 }: Props) {
   return (
-    // eslint-disable-next-line @next/next/no-img-element
-    <img
-      alt="Player Country"
-      src={`/assets/flags/${code.toLowerCase()}.png`}
-      width={size * 2}
-      className={`w-[${size * 2}px] object-contain`}
-    />
+    <Tooltip display={<p>{normalizedRegionName(code)}</p>} asChild={false}>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        alt="Player Country"
+        src={`/assets/flags/${code.toLowerCase()}.png`}
+        width={size * 2}
+        className={`w-[${size * 2}px] object-contain`}
+      />
+    </Tooltip>
   );
 }
diff --git a/projects/website/src/components/player/player-header.tsx b/projects/website/src/components/player/player-header.tsx
index 4703879..ae482bf 100644
--- a/projects/website/src/components/player/player-header.tsx
+++ b/projects/website/src/components/player/player-header.tsx
@@ -11,6 +11,7 @@ import PlayerTrackedStatus from "@/components/player/player-tracked-status";
 import ScoreSaberPlayer from "@ssr/common/types/player/impl/scoresaber-player";
 import Link from "next/link";
 import { capitalizeFirstLetter } from "@/common/string-utils";
+import { normalizedRegionName } from "@ssr/common/utils/region-utils";
 
 /**
  * Renders the change for a stat.
@@ -23,7 +24,7 @@ const renderDailyChange = (change: number, tooltip: ReactElement, format?: (valu
   format = format ?? formatNumberWithCommas;
 
   return (
-    <Tooltip display={tooltip}>
+    <Tooltip display={tooltip} side="bottom">
       <p className={`text-sm ${change > 0 ? "text-green-400" : "text-red-400"}`}>
         {change > 0 ? "+" : ""}
         {format(change)}
diff --git a/projects/website/src/components/tooltip.tsx b/projects/website/src/components/tooltip.tsx
index b7b8201..60f3da9 100644
--- a/projects/website/src/components/tooltip.tsx
+++ b/projects/website/src/components/tooltip.tsx
@@ -11,16 +11,21 @@ type Props = {
    */
   display: React.ReactNode;
 
+  /**
+   * Display the trigger as a child element.
+   */
+  asChild?: boolean;
+
   /**
    * Where the tooltip will be displayed
    */
   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 (
     <ShadCnTooltip>
-      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
       <TooltipContent side={side}>{display}</TooltipContent>
     </ShadCnTooltip>
   );