web client changfed

src/components/Output/Pictograms.js

@@ -1,4 +1,5 @@
 import React from "react";
+import Tooltip from "@material-ui/core/Tooltip";
 // ICONS
 import alcohol from "../../public/i_alcohol.svg";
 import card from "../../public/i_card.svg";
@@ -18,12 +19,14 @@ import vegetarian from "../../public/i_vegetarian.svg";
 
 export default function (props) {
   const pictograms = props.pictograms.map((pictogram, index) => (
-    <img
-      key={index}
-      className="pictogram"
-      src={getImage(pictogram)}
-      alt={pictogram}
-    />
+    <Tooltip title={getTooltip(pictogram)}>
+      <img
+        key={index}
+        className="pictogram"
+        src={getImage(pictogram)}
+        alt={pictogram}
+      />
+    </Tooltip>
   ));
 
   return <div className="pictograms-container">{pictograms}</div>;
@@ -65,3 +68,40 @@ function getImage(name) {
       return card;
   }
 }
+
+function getTooltip(name) {
+  switch (name) {
+    case "alcohol":
+      return "Serwujemy alkohol";
+    case "cardPayments":
+      return "Zapłacisz kartą";
+    case "delivery":
+      return "Dowozimy";
+    case "eggs":
+      return "Jaja";
+    case "gluten":
+      return "Gluten";
+    case "glutenFree":
+      return "Bezglutenowe";
+    case "lactose":
+      return "Laktoza";
+    case "lactoseFree":
+      return "Bez laktozy";
+    case "peanuts":
+      return "Orzechy";
+    case "petFriendly":
+      return "Lubimy zwierzęta";
+    case "seaFood":
+      return "Owoce morza";
+    case "sesame":
+      return "Sezam";
+    case "soy":
+      return "Soja";
+    case "vegan":
+      return "Wegańskie";
+    case "vegetarian":
+      return "Wegetariańskie";
+    default:
+      return "Podpowiedź";
+  }
+}