update

src/assets/icons/lightBlueDotIcon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <circle id="Ellipse_18" data-name="Ellipse 18" cx="8" cy="8" r="8" fill="#89ecff"/>
+</svg>

src/assets/icons/purpleDotIcon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <circle id="Ellipse_17" data-name="Ellipse 17" cx="8" cy="8" r="8" fill="#924eeb"/>
+</svg>

src/assets/icons/redDotIcon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <circle id="Ellipse_19" data-name="Ellipse 19" cx="8" cy="8" r="8" fill="#fc5353"/>
+</svg>

src/assets/icons/yellowDotIcon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <circle id="Ellipse_20" data-name="Ellipse 20" cx="8" cy="8" r="8" fill="#fcf653"/>
+</svg>

src/components/productDesign/ProductDesign.js

@@ -6,6 +6,11 @@ import book from "../../assets/images/goldon.png";
 import heart from "../../assets/icons/vuesax-linear-heart.svg";
 import discountImg from "../../assets/icons/discount.png";
 
+import YellowDotIcon from "../../assets/icons/yellowDotIcon.svg";
+import RedDotIcon from "../../assets/icons/redDotIcon.svg";
+import PurpleDotIcon from "../../assets/icons/purpleDotIcon.svg";
+import LightBlueDotIcon from "../../assets/icons/lightBlueDotIcon.svg";
+
 const ProductDesign = ({
   colors,
   likeBtn,
@@ -89,21 +94,11 @@ const ProductDesign = ({
               </div>
               {/* select Color */}
               {colors && (
-                <div className="absolute right-2 bottom-2">
-                  <ul className="flex ">
-                    <li className="ml-1 text-selectColor1">
-                      {/* <FontAwesomeIcon icon="check-square" /> */}
-                    </li>
-                    <li className="ml-1 text-selectColor2">
-                      {/* <FontAwesomeIcon icon="check-square" /> */}
-                    </li>
-                    <li className="ml-1 text-selectColor3">
-                      {/* <FontAwesomeIcon icon="check-square" /> */}
-                    </li>
-                    <li className="ml-1 text-selectColor4">
-                      {/* <FontAwesomeIcon icon="check-square" /> */}
-                    </li>
-                  </ul>
+                <div className="flex items-center absolute right-2 bottom-2">
+                  <img src={YellowDotIcon} alt="" />
+                  <img src={RedDotIcon} alt="" />
+                  <img src={PurpleDotIcon} alt="" />
+                  <img src={LightBlueDotIcon} alt="" />
                 </div>
               )}
             </div>