feat: stars tooltip

cardano-scaling · Dec 1, 2024 · 91d9c48 · 91d9c48
1 parent 2f2654c
commit 91d9c48
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
+    "react-tooltip": "^5.28.0",
     "use-clipboard-copy": "^0.2.0",
     "use-custom-compare": "^1.4.0",
     "usehooks-ts": "^3.1.0"

diff --git a/src/components/SessionStats/SessionStats.tsx b/src/components/SessionStats/SessionStats.tsx
@@ -8,6 +8,7 @@ import { fetchSessionStats } from "../../utils/requests";
 import { SessionStatsInterface } from "../../types";
 import { FaStar } from "react-icons/fa6";
 import cx from "classnames";
+import { Tooltip } from "react-tooltip";
 
 const SessionStats: FC<Pick<StatsCardProps, "size" | "titleAlign">> = ({
   size,
@@ -27,39 +28,57 @@ const SessionStats: FC<Pick<StatsCardProps, "size" | "titleAlign">> = ({
 
   const stats = [
     {
+      id: "games-played",
       label: "Games Played:",
       value: game_started,
       showStar: game_started > 0,
       starColor: game_started >= 4 ? "text-yellow-400" : "text-white",
+      tooltip: (
+        <Tooltip anchorSelect="#games-played">
+          <div>Pass qualifier: 1</div>
+          <div>Achievement: 4</div>
+        </Tooltip>
+      ),
     },
     {
+      id: "kills",
       label: "Kills:",
       value: kill,
       showStar: kill >= 25,
       starColor: kill >= 50 ? "text-yellow-400" : "text-white",
+      tooltip: (
+        <Tooltip anchorSelect="#kills">
+          <div>Pass qualifier: 25</div>
+          <div>Achievement: 50</div>
+        </Tooltip>
+      ),
     },
     {
+      id: "deaths",
       label: "Deaths:",
       value: death,
       showStar: false,
       starColor: null,
     },
   ];
 
-  const formattedStats = stats.map(({ label, value, showStar, starColor }) => {
-    const formattedValue = formatNumber(value);
-    return {
-      label,
-      value: showStar ? (
-        <div className="flex items-center gap-4 w-fit">
-          <div className="w-5">{formattedValue}</div>
-          <FaStar className={cx("text-base", starColor)} />
-        </div>
-      ) : (
-        formattedValue
-      ),
-    };
-  });
+  const formattedStats = stats.map(
+    ({ label, value, showStar, starColor, tooltip, id }) => {
+      const formattedValue = formatNumber(value);
+      return {
+        label,
+        value: showStar ? (
+          <div className="flex items-center gap-4 w-fit">
+            <div className="w-5">{formattedValue}</div>
+            <FaStar className={cx("text-base", starColor)} id={id} />
+            {tooltip}
+          </div>
+        ) : (
+          formattedValue
+        ),
+      };
+    },
+  );
 
   if (!accountData) return null;
 

diff --git a/yarn.lock b/yarn.lock
@@ -377,6 +377,26 @@
   resolved "https://registry.yarnpkg.com/@eslint/object-schema/-/object-schema-2.1.4.tgz#9e69f8bb4031e11df79e03db09f9dbbae1740843"
   integrity sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==
 
+"@floating-ui/core@^1.6.0":
+  version "1.6.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.8.tgz#aa43561be075815879305965020f492cdb43da12"
+  integrity sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==
+  dependencies:
+    "@floating-ui/utils" "^0.2.8"
+
+"@floating-ui/dom@^1.6.1":
+  version "1.6.12"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.12.tgz#6333dcb5a8ead3b2bf82f33d6bc410e95f54e556"
+  integrity sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==
+  dependencies:
+    "@floating-ui/core" "^1.6.0"
+    "@floating-ui/utils" "^0.2.8"
+
+"@floating-ui/utils@^0.2.8":
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.8.tgz#21a907684723bbbaa5f0974cf7730bd797eb8e62"
+  integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==
+
 "@humanwhocodes/module-importer@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
@@ -1069,7 +1089,7 @@ chokidar@^3.5.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
-classnames@^2.5.1:
+classnames@^2.3.0, classnames@^2.5.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
   integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
@@ -2223,6 +2243,14 @@ react-refresh@^0.14.2:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.2.tgz#3833da01ce32da470f1f936b9d477da5c7028bf9"
   integrity sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==
 
+react-tooltip@^5.28.0:
+  version "5.28.0"
+  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.28.0.tgz#c7b5343ab2d740a428494a3d8315515af1f26f46"
+  integrity sha512-R5cO3JPPXk6FRbBHMO0rI9nkUG/JKfalBSQfZedZYzmqaZQgq7GLzF8vcCWx6IhUCKg0yPqJhXIzmIO5ff15xg==
+  dependencies:
+    "@floating-ui/dom" "^1.6.1"
+    classnames "^2.3.0"
+
 react@^18.3.1:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"