Merge pull request #190 from joshzcold/feat/csv_tooltip

feat(ui): file upload button has a tooltip showing csv style formatting.
joshzcold · Feb 6, 2025 · e09dc35 · e09dc35
2 parents e31f26c + b1568d2
commit e09dc35
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/src/components/Admin/AdminSettings/BuzzerSoundSettings.jsx b/src/components/Admin/AdminSettings/BuzzerSoundSettings.jsx
@@ -1,4 +1,4 @@
-import InfoTooltip from "@/components/ui/tooltip";
+import ToolTipIcon from "@/components/ui/tooltip";
 import { useTranslation } from "react-i18next";
 
 function BuzzerSoundSettings({ game, setGame, send }) {
@@ -9,7 +9,7 @@ function BuzzerSoundSettings({ game, setGame, send }) {
       <div className="flex flex-col">
         <div className="flex flex-row items-center space-x-5">
           <div className="flex flex-row items-center space-x-2">
-            <InfoTooltip message={t("Allow players to hear sound on their devices when they press their buzzer")} />
+            <ToolTipIcon message={t("Allow players to hear sound on their devices when they press their buzzer")} />
             <p className="text-xl normal-case text-foreground">{t("Player Buzzer Sounds")}</p>
           </div>
           <input
@@ -31,7 +31,7 @@ function BuzzerSoundSettings({ game, setGame, send }) {
       <div className={`flex flex-col ${!game.settings.player_buzzer_sound ? "opacity-50" : ""}`}>
         <div className="flex flex-row items-center space-x-5">
           <div className="flex flex-row items-center space-x-2">
-            <InfoTooltip message={t("Only play sound for the first player to buzz in")} />
+            <ToolTipIcon message={t("Only play sound for the first player to buzz in")} />
             <p className="text-xl normal-case text-foreground">{t("First Press Only")}</p>
           </div>
           <input

diff --git a/src/components/Admin/GameLoader.jsx b/src/components/Admin/GameLoader.jsx
@@ -1,3 +1,4 @@
+import ToolTipIcon from "@/components/ui/tooltip";
 import { ERROR_CODES } from "@/i18n/errorCodes";
 import { handleCsvFile, handleJsonFile, isValidFileType } from "@/lib/utils";
 import { FileUp } from "lucide-react";
@@ -90,7 +91,12 @@ const GameLoader = ({ gameSelector, send, setError, setCsvFileUpload, setCsvFile
         <div id="gamePickerFileUploadButton">
           <label htmlFor="gamePickerFileUpload">
             <div className="flow-row flex items-center space-x-2">
-              <FileUp className="cursor-pointer text-secondary-900 hover:text-secondary-500" size={38} />
+              <ToolTipIcon
+                Icon={FileUp}
+                size={32}
+                cursor="pointer"
+                message={`CSV ${t("Expected format")}: ${t("Question")}, ${t("Answer")}, ${t("Points")}, ${t("Answer")}, ${t("Points")} ...`}
+              />
               <div>
                 <p className="text-s text-secondary-900">{t("upload game")}</p>
                 <p className="text-xs text-secondary-900">.json, .csv</p>

diff --git a/src/components/ui/tooltip.jsx b/src/components/ui/tooltip.jsx
@@ -1,13 +1,14 @@
 import { Info } from "lucide-react";
 import { useState } from "react";
 
-const InfoTooltip = ({ message }) => {
+const ToolTipIcon = ({ message, Icon = Info, size = 20, cursor = "default" }) => {
   const [isVisible, setIsVisible] = useState(false);
 
   return (
     <div className="relative inline-block">
-      <Info
-        className="size-5 text-secondary-900 transition-colors hover:text-secondary-700"
+      <Icon
+        className={`cursor-${cursor} text-secondary-900 transition-colors hover:text-secondary-700`}
+        size={size}
         onMouseEnter={() => setIsVisible(true)}
         onMouseLeave={() => setIsVisible(false)}
       />
@@ -24,4 +25,4 @@ const InfoTooltip = ({ message }) => {
   );
 };
 
-export default InfoTooltip;
+export default ToolTipIcon;