Merge pull request #37 from metaversecloud-com/dev

add description to tooltip

Author: LinaBell

client/src/components/BadgesScreen/BadgesScreen.jsx

@@ -52,13 +52,16 @@ export const BadgesScreen = () => {
         <div className="grid grid-cols-3 gap-2 pt-4">
           {badges &&
             Object.values(badges).map((badge) => {
-              const hasBadge = visitorInventory && Object.keys(visitorInventory).includes(badge.name);
-              const style = { width: "90px" };
+              const { name, description, icon } = badge;
+              const hasBadge = visitorInventory && Object.keys(visitorInventory).includes(name);
+              const style = { width: "90px", filter: "none" };
               if (!hasBadge) style.filter = "grayscale(1)";
               return (
-                <div className="tooltip m-auto" key={badge.id}>
-                  <span className="tooltip-content">{badge.name}</span>
-                  <img src={badge.icon} alt={badge.name} style={style} />
+                <div className="tooltip" key={name}>
+                  <span className="tooltip-content" style={{ width: "115px" }}>
+                    {name} {description && `- ${description}`}
+                  </span>
+                  <img src={icon} alt={name} style={style} />
                 </div>
               );
             })}