update

package-lock.json

@@ -18,6 +18,7 @@
         "react-dom": "^17.0.2",
         "react-icons": "^4.3.1",
         "react-scripts": "5.0.0",
+        "react-tooltip": "^4.2.21",
         "sass": "^1.45.0",
         "web-vitals": "^2.1.2"
       },
@@ -13292,6 +13293,30 @@
         }
       }
     },
+    "node_modules/react-tooltip": {
+      "version": "4.2.21",
+      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.21.tgz",
+      "integrity": "sha512-zSLprMymBDowknr0KVDiJ05IjZn9mQhhg4PRsqln0OZtURAJ1snt1xi5daZfagsh6vfsziZrc9pErPTDY1ACig==",
+      "dependencies": {
+        "prop-types": "^15.7.2",
+        "uuid": "^7.0.3"
+      },
+      "engines": {
+        "npm": ">=6.13"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
+    "node_modules/react-tooltip/node_modules/uuid": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
+      "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -25498,6 +25523,22 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "react-tooltip": {
+      "version": "4.2.21",
+      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.21.tgz",
+      "integrity": "sha512-zSLprMymBDowknr0KVDiJ05IjZn9mQhhg4PRsqln0OZtURAJ1snt1xi5daZfagsh6vfsziZrc9pErPTDY1ACig==",
+      "requires": {
+        "prop-types": "^15.7.2",
+        "uuid": "^7.0.3"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
+          "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg=="
+        }
+      }
+    },
     "readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",

package.json

@@ -13,6 +13,7 @@
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
     "react-scripts": "5.0.0",
+    "react-tooltip": "^4.2.21",
     "sass": "^1.45.0",
     "web-vitals": "^2.1.2"
   },

src/App.js

@@ -16,19 +16,19 @@ import VodProductDesign from "./components/vodProductDesign/VodProductDesign";
 function App() {
   return (
     <div className="App">
-      {/* <ProductDesign /> */}
+      <ProductDesign />
-      {/* <VodProductDesign /> */}
+      <VodProductDesign />
-      {/* <BookDesign /> */}
+      <BookDesign />
-      {/* <ButtonDesign /> */}
+      <ButtonDesign />
-      {/* <ProductTags /> */}
+      <ProductTags />
-      {/* <CounterDesign /> */}
+      <CounterDesign />
       <BlogDesign1 />
       <BlogDesign2 />
       <BlogDesign3 />
       <BlogDesign4 />
       <BlogDesign5 />
       <BlogDesign6 />
-      {/* <HeaderDesign1 /> */}
+      <HeaderDesign1 />
     </div>
   );
 }

src/components/productDesign/ProductDesign.js

@@ -2,6 +2,8 @@ import React from "react";
 import "./ProductDesign.scss";
 import StarRating from "../starRating/StarRating";
 
+import ReactTooltip from "react-tooltip";
+
 import book from "../../assets/images/goldon.png";
 import watermelon from "../../assets/images/watermelon.png";
 
@@ -110,10 +112,34 @@ const ProductDesign = ({
               {/* select Color */}
               {colors && (
                 <div className="flex items-center absolute right-2 bottom-2">
-                  <img src={YellowDotIcon} alt="" className="w-3 h-3 ml-1" />
+                  <img
-                  <img src={RedDotIcon} alt="" className="w-3 h-3 ml-1" />
+                    src={YellowDotIcon}
-                  <img src={PurpleDotIcon} alt="" className="w-3 h-3 ml-1" />
+                    alt=""
-                  <img src={LightBlueDotIcon} alt="" className="w-3 h-3 ml-1" />
+                    data-tip="زرد"
+                    className="w-3 h-3 ml-1"
+                  />
+                  <ReactTooltip place="top" type="dark" effect="float" />
+                  <img
+                    src={RedDotIcon}
+                    alt=""
+                    data-tip="قرمز"
+                    className="w-3 h-3 ml-1"
+                  />
+                  <ReactTooltip place="top" type="dark" effect="float" />
+                  <img
+                    src={PurpleDotIcon}
+                    alt=""
+                    data-tip="بنفش"
+                    className="w-3 h-3 ml-1"
+                  />
+                  <ReactTooltip place="top" type="dark" effect="float" />
+                  <img
+                    src={LightBlueDotIcon}
+                    alt=""
+                    data-tip="آبی"
+                    className="w-3 h-3 ml-1"
+                  />
+                  <ReactTooltip place="top" type="dark" effect="float" />
                 </div>
               )}
             </div>