update 1 file and delete 10 files

public/images/SingleProductlightBlueDotIcon.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>

public/images/SingleProductpurpleDotIcon.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>

public/images/SingleProductredDotIcon.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>

public/images/SingleProductvuesax-linear-heart.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="vuesax_linear_heart" data-name="vuesax/linear/heart" transform="translate(-236 -188)">
+    <g id="heart">
+      <path id="Vector" d="M10.62,17.71a2.181,2.181,0,0,1-1.24,0C6.48,16.72,0,12.59,0,5.59A5.574,5.574,0,0,1,5.56,0,5.515,5.515,0,0,1,10,2.24,5.547,5.547,0,0,1,20,5.59C20,12.59,13.52,16.72,10.62,17.71Z" transform="translate(238 191.1)" fill="none" stroke="#e11010" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(236 188)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>

public/images/SingleProductyellowDotIcon.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/CardTrelloDesign/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Button from "../ButtonDesign/Button";
 import CircleInCircle from "../CircleInCircle";
-import NewTagDesign from "../NewTagDesign";
+import TagDesign1 from "../Tag/TagDesign1";
 
 import clock from "./images/clock.svg";
 import nike from "./images/nike.svg";
@@ -85,7 +85,7 @@ const CardTrelloDesign = ({
           )}
           {showTag &&
             tags.map((tag) => (
-              <NewTagDesign
+              <TagDesign1
                 title={tag.title}
                 tagClassName={`flex-row-reverse rounded-sm p-1 text-xs ${tag.className}`}
                 iconClassName={"w-4 mr-0 ml-1"}

src/components/Rating/StarRating1/index.js

@@ -1,9 +1,8 @@
 // it has style inside index.scss ---> // Start StarRating && end StarRating
 
 import React, { useState } from "react";
-import "./StarRating.scss";
 
-const StarRating = () => {
+const StarRating1 = () => {
   const [rating, setRating] = useState(5);
   // const [hover, setHover] = useState(5);
   return (
@@ -27,4 +26,4 @@ const StarRating = () => {
   );
 };
 
-export default StarRating;
+export default StarRating1;

src/components/Rating/index.js

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+
+import StarRating1 from "./StarRating1";
+
+function Rating() {
+  const list = {
+    1: <StarRating1 />,
+  };
+  const [type, setType] = useState(1);
+  return (
+    <div className="w-full flex flex-col items-center">
+      <select
+        className="mb-10 w-20 bg-gray-200"
+        onChange={(e) => setType(e.target.value)}
+      >
+        {Object.keys(list).map((option, index) => (
+          <option key={index}>{option}</option>
+        ))}
+      </select>
+      {list[type]}
+    </div>
+  );
+}
+
+export default Rating;

src/components/SingleProduct/index.js

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+
+import ProductDesign1 from "./ProductDesign1";
+
+function SingleProduct() {
+  const list = {
+    1: <ProductDesign1 />,
+  };
+  const [type, setType] = useState(1);
+  return (
+    <div className="w-full flex flex-col items-center">
+      <select
+        className="mb-10 w-20 bg-gray-200"
+        onChange={(e) => setType(e.target.value)}
+      >
+        {Object.keys(list).map((option, index) => (
+          <option key={index}>{option}</option>
+        ))}
+      </select>
+      {list[type]}
+    </div>
+  );
+}
+
+export default SingleProduct;

src/components/Tag/TagDesign1/index.js

@@ -1,8 +1,6 @@
 import React from "react";
 
-import blackCancleIcon from "./black-cancle-icon.svg";
+const Design1 = ({ title, icon, tagClassName, iconClassName }) => {
-
-const NewTagDesign = ({ title, icon, tagClassName, iconClassName }) => {
   return (
     <button className={`flex items-center ${tagClassName}`}>
       {title}
@@ -11,14 +9,14 @@ const NewTagDesign = ({ title, icon, tagClassName, iconClassName }) => {
   );
 };
 
-export default NewTagDesign;
+export default Design1;
 
-NewTagDesign.defaultProps = {
+Design1.defaultProps = {
   title: "کتاب",
 
   tagClassName:
     "flex flex-row items-center text-blue-600 text-xs font-sansbold p-1 p-2 bg-blue-300 border-2 border-blue-600 rounded-full",
   iconClassName: "w-2.5 mr-5 ml-4",
 
-  icon: blackCancleIcon,
+  icon: "images/black-cancle-icon.svg",
 };

src/components/productTags/ProductTags.css

@@ -1 +0,0 @@
-/* No CSS *//*# sourceMappingURL=ProductTags.css.map */

src/components/productTags/ProductTags.css.map

@@ -1,9 +0,0 @@
-{
-    "version": 3,
-    "mappings": "",
-    "sources": [
-        "ProductTags.scss"
-    ],
-    "names": [],
-    "file": "ProductTags.css"
-}

src/components/productTags/ProductTags.js

@@ -1,167 +0,0 @@
-import React from "react";
-import "./ProductTags.scss";
-
-import blackCancleIcon from "../../assets/icons/black-cancle-icon.svg";
-import blackDeliveryIcon from "../../assets/icons/black-delivery-icon.svg";
-import blackRightIcon from "../../assets/icons/black-right-icon.svg";
-import blackSettingIcon from "../../assets/icons/black-settings-icon.svg";
-import lightGreenGiftIcon from "../../assets/icons/light-green-gift-icon.svg";
-import lightPurpleDoubleRightIcon from "../../assets/icons/light-purple-double-right-icon.svg";
-import darkBlueNewspaperIcon from "../../assets/icons/dark-blue-newspaper-icon.svg";
-import darkBlueCancleIcon from "../../assets/icons/dark-blue-cancle-icon.svg";
-import lightBlueCancleIcon from "../../assets/icons/light-blue-cancle-icon.svg";
-import lightBlueDeliveryIcon from "../../assets/icons/light-blue-delivery-icon.svg";
-import lightGreenCancleIcon from "../../assets/icons/light-green-cancle-icon.svg";
-import lightOrangeCancleIcon from "../../assets/icons/light-orange-cancle-icon.svg";
-import lightPurpleCancleIcon from "../../assets/icons/light-purple-cancle-icon.svg";
-import lightYelloCancleIcon from "../../assets/icons/light-yellow-cancle-icon.svg";
-import lightOrangeRightIcon from "../../assets/icons/light-orange-right-icon.svg";
-
-const ProductTags = ({
-  tagtitlecolor,
-  tagBgColor,
-  tagBorderColor,
-  deliveryIcon,
-  rightIcon,
-  darkSettingsIcon,
-  greenGiftIcon,
-  purpleCheckboxIcon,
-  blueNewspaperIcon,
-  cancleIcon,
-  darkBlueIconCancle,
-  lightBlueIconCancle,
-  lightBlueIconDelivery,
-  lightGreenIconCancle,
-  lightOrangeIconCancle,
-  lightPurpleIconCancle,
-  lightYellowIconCancle,
-  lightOrangeIconRight,
-}) => {
-  return (
-    <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
-      <div className="flex items-center justify-between mb-6">
-        <h2 className="text-base bg-red-500 rounded-full shadow-sm shadow-black text-white p-2">
-          تگ محصولات
-        </h2>
-      </div>
-      <div className="my-4">
-        <p className="leading-10">
-          نام این کامپوننت
-          <span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
-            productTags
-          </span>
-          است.
-        </p>
-      </div>
-      {/* product UI Design */}
-      <div className="flex flex-wrap items-center justify-around ">
-        <div className="mt-2 flex flex-wrap w-1/5	">
-          <button
-            className={`flex items-center rounded border-2 px-1 py-1 text-xs ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
-          >
-            {deliveryIcon && (
-              <img src={blackDeliveryIcon} alt="" className="ml-1 w-4" />
-            )}
-            {lightBlueIconCancle && (
-              <img src={lightBlueDeliveryIcon} alt="" className="ml-1 w-4" />
-            )}
-            {rightIcon && (
-              <img src={blackRightIcon} alt="" className="ml-1 w-4" />
-            )}
-            {lightOrangeIconRight && (
-              <img src={lightOrangeRightIcon} alt="" className="ml-1 w-4" />
-            )}
-            {darkSettingsIcon && (
-              <img src={blackSettingIcon} alt="" className="ml-1 w-4" />
-            )}
-            {greenGiftIcon && (
-              <img src={lightGreenGiftIcon} alt="" className="ml-1 w-4" />
-            )}
-            {purpleCheckboxIcon && (
-              <img
-                src={lightPurpleDoubleRightIcon}
-                alt=""
-                className="ml-1 w-4"
-              />
-            )}
-            {blueNewspaperIcon && (
-              <img src={darkBlueNewspaperIcon} alt="" className="ml-1 w-4" />
-            )}
-            ارسال رایگان
-            {cancleIcon && (
-              <img src={blackCancleIcon} alt="" className="w-2 mr-3" />
-            )}
-            {darkBlueIconCancle && (
-              <img src={darkBlueCancleIcon} alt="" className="w-2 mr-3" />
-            )}
-            {lightBlueIconDelivery && (
-              <img src={lightBlueCancleIcon} alt="" className="w-2 mr-3" />
-            )}
-            {lightGreenIconCancle && (
-              <img src={lightGreenCancleIcon} alt="" className="w-2 mr-3" />
-            )}
-            {lightOrangeIconCancle && (
-              <img src={lightOrangeCancleIcon} alt="" className="w-2 mr-3" />
-            )}
-            {lightPurpleIconCancle && (
-              <img src={lightPurpleCancleIcon} alt="" className="w-2 mr-3" />
-            )}
-            {lightYellowIconCancle && (
-              <img src={lightYelloCancleIcon} alt="" className="w-2 mr-3" />
-            )}
-          </button>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default ProductTags;
-
-// color classes that i defined in tailwind.config.js and we can use for text color:
-// ----> text-grayTextColor
-// ----> text-lightBlueTextColor
-// ----> text-lightOrangeTextColor
-// ----> text-lightYellowTextColor
-// ----> text-lightGreenTextColor
-// ----> text-lightPurpleTextColor
-// ----> text-darkBlueTextColor
-
-// color classes that i defined in tailwind.config.js and we can use for background color:
-// ----> bg-productTagBg
-// ----> bg-lightOrangeBgColor
-// ----> bg-lightYellowBgColor
-// ----> bg-lightBlueBgColor
-// ----> bg-lightGreenBgColor
-// ----> bg-lightPurpleBgColor
-
-// color classes that i defined in tailwind.config.js and we can use for border color:
-// ----> border-lightBlueBorderColor
-// ----> border-grayBorderColor
-// ----> border-lightOrangeBorderColor
-// ----> border-lightYellowBorderColor
-// ----> border-lightGreenBorderColor
-// ----> border-lightPurpleBorderColor
-// ----> border-darkBlueBorderColor
-
-ProductTags.defaultProps = {
-  tagtitlecolor: "text-lightOrangeTextColor",
-  tagBgColor: "bg-lightOrangeBgColor",
-  tagBorderColor: "border-lightOrangeBorderColor",
-  // for icons
-  deliveryIcon: false,
-  lightBlueIconDelivery: false,
-  rightIcon: false,
-  lightOrangeIconRight: true,
-  darkSettingsIcon: false,
-  greenGiftIcon: false,
-  purpleCheckboxIcon: false,
-  blueNewspaperIcon: false,
-  cancleIcon: false,
-  darkBlueIconCancle: false,
-  lightBlueIconCancle: false,
-  lightGreenIconCancle: false,
-  lightOrangeIconCancle: true,
-  lightPurpleIconCancle: false,
-  lightYellowIconCancle: false,
-};

src/components/starRating/StarRating.css

@@ -1,8 +0,0 @@
-.on {
-  color: #ffbd35;
-}
-
-.off {
-  color: #ccc;
-}
-/*# sourceMappingURL=StarRating.css.map */

src/components/starRating/StarRating.css.map

@@ -1,9 +0,0 @@
-{
-    "version": 3,
-    "mappings": "AAAA,AAAA,GAAG,CAAC;EACF,KAAK,EAAE,OAAO;CACf;;AACD,AAAA,IAAI,CAAC;EACH,KAAK,EAAE,IAAI;CACZ",
-    "sources": [
-        "StarRating.scss"
-    ],
-    "names": [],
-    "file": "StarRating.css"
-}