counter component added

src/App.js

@@ -2,13 +2,15 @@ import "./App.scss";
 import ButtonDesign from "./components/buttonDesign/ButtonDesign";
 import ProductDesign from "./components/productDesign/ProductDesign";
 import ProductTags from "./components/productTags/ProductTags";
+import CounterDesign from "./components/counterDesign/CounterDesign";
 
 function App() {
   return (
     <div className="App">
       {/* <ProductDesign /> */}
-      <ButtonDesign />
+      {/* <ButtonDesign /> */}
-      <ProductTags />
+      {/* <ProductTags /> */}
+      <CounterDesign />
     </div>
   );
 }

src/assets/icons/black-dislike-icon.svg

@@ -0,0 +1,7 @@
+<svg id="vuesax_linear_dislike" data-name="vuesax/linear/dislike" xmlns="http://www.w3.org/2000/svg" width="49.199" height="49.199" viewBox="0 0 49.199 49.199">
+  <g id="dislike" transform="translate(0 0)">
+    <path id="Vector" d="M28.984,6.15,22.629,1.23A6.308,6.308,0,0,0,18.734,0h-7.79A6.157,6.157,0,0,0,5.2,4.3L.285,19.27C-.74,22.14,1.1,24.6,4.18,24.6h8.2a2.068,2.068,0,0,1,2.05,2.46L13.4,33.619a4.044,4.044,0,0,0,2.665,4.51,4.093,4.093,0,0,0,4.51-1.435l8.4-12.5" transform="translate(4.881 5.432)" fill="none" stroke="#818181" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M10.25,3.895v20.09c0,2.87-1.23,3.895-4.1,3.895H4.1c-2.87,0-4.1-1.025-4.1-3.895V3.895C0,1.025,1.23,0,4.1,0H6.15C9.02,0,10.25,1.025,10.25,3.895Z" transform="translate(34.07 7.687)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-3" data-name="Vector" d="M0,0H49.2V49.2H0Z" fill="none" opacity="0"/>
+  </g>
+</svg>

src/assets/icons/black-like-icon.svg

@@ -0,0 +1,7 @@
+<svg id="vuesax_linear_like" data-name="vuesax/linear/like" xmlns="http://www.w3.org/2000/svg" width="49.199" height="49.199" viewBox="0 0 49.199 49.199">
+  <g id="like" transform="translate(0 0)">
+    <path id="Vector" d="M0,32.189l6.355,4.92a6.308,6.308,0,0,0,3.895,1.23h7.79a6.157,6.157,0,0,0,5.74-4.3L28.7,19.069c1.025-2.87-.82-5.33-3.895-5.33H16.6a2.068,2.068,0,0,1-2.05-2.46l1.025-6.56A4.044,4.044,0,0,0,12.915.209,4.093,4.093,0,0,0,8.4,1.644L0,14.149" transform="translate(15.334 5.428)" fill="#fff" stroke="#818181" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M0,23.985V3.895C0,1.025,1.23,0,4.1,0H6.15c2.87,0,4.1,1.025,4.1,3.895v20.09c0,2.87-1.23,3.895-4.1,3.895H4.1C1.23,27.88,0,26.855,0,23.985Z" transform="translate(4.879 13.632)" fill="#fff" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-3" data-name="Vector" d="M0,0H49.2V49.2H0Z" fill="#fff" opacity="0"/>
+  </g>
+</svg>

src/assets/icons/decrement-counter-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="56.176" height="50.559" viewBox="0 0 56.176 50.559">
+  <path id="Polygon_5" data-name="Polygon 5" d="M28.088,0,56.176,50.559H0Z" transform="translate(56.176 50.559) rotate(180)" fill="#dbdbdb"/>
+</svg>

src/assets/icons/increment-counter-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="56.176" height="50.559" viewBox="0 0 56.176 50.559">
+  <path id="Polygon_4" data-name="Polygon 4" d="M28.088,0,56.176,50.559H0Z" fill="#dbdbdb"/>
+</svg>

src/components/buttonDesign/ButtonDesign.js

@@ -56,7 +56,7 @@ const ButtonDesign = ({
         <div className="flex flex-wrap justify-around items-center">
           <div>
             <button
-              className={`btnUiDesign ${buttonBgColor} ${buttonTextColor} ${buttonBorder} ${buttonBorderColor} ${buttonBorderRadius} ${buttonPaddingX} ${buttonPaddingY}`}
+              className={`flex items-center  text-sm md:text-base ${buttonBgColor} ${buttonTextColor} ${buttonBorder} ${buttonBorderColor} ${buttonBorderRadius} ${buttonPaddingX} ${buttonPaddingY}`}
             >
               اطلاعات بیشتر
               {leftArrowWhite && (

src/components/buttonDesign/ButtonDesign.scss

@@ -1,3 +0,0 @@
-.btnUiDesign {
-  @apply flex items-center  text-sm md:text-base;
-}

src/components/counterDesign/CounterDesign.js

@@ -0,0 +1,61 @@
+import React from "react";
+import "./CounterDesign.scss";
+
+import blackDisLikeIcon from "../../assets/icons/black-dislike-icon.svg";
+import blackLikeIcon from "../../assets/icons/black-like-icon.svg";
+import decrementCounterIcon from "../../assets/icons/decrement-counter-icon.svg";
+import incrementCounterIcon from "../../assets/icons/increment-counter-icon.svg";
+
+// {deliveryIcon && (
+//   <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
+// )}
+
+const CounterDesign = ({
+  counterColor,
+  counterIncreaseBtn,
+  counterDecreaseBtn,
+  likeBtn,
+}) => {
+  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-blue-300 rounded-full shadow-md shadow-blue-900 text-white p-2">
+          طراحی کانتر
+        </h2>
+      </div>
+      <div className="flex-col items-center  justify-center">
+        {likeBtn && (
+          <div className="flex items-center">
+            <img src={blackLikeIcon} alt="" className="w-8 mb-4" />
+            <img src={blackDisLikeIcon} alt="" className="w-8 mb-4" />
+          </div>
+        )}
+        {counterIncreaseBtn && (
+          <img src={incrementCounterIcon} alt="" className="w-8 mb-4" />
+        )}
+        <p
+          className={` text-sm sm:text-base md:text-2xl font-bold ${counterColor}  `}
+        >
+          561
+        </p>
+        {counterDecreaseBtn && (
+          <img src={decrementCounterIcon} alt="" className="w-8 mt-4" />
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default CounterDesign;
+
+// color classes that i defined in tailwind.config.js and we can use for text color:
+// ----> text-lightBlueTextColor
+// ----> text-darkRedTextColor
+
+CounterDesign.defaultProps = {
+  counterColor: "text-darkRedTextColor",
+  // for icons
+  likeBtn: false,
+  counterIncreaseBtn: true,
+  counterDecreaseBtn: true,
+};

src/components/productTags/ProductTags.js

@@ -48,7 +48,7 @@ const ProductTags = ({
       <div className="flex flex-wrap items-center justify-around ">
         <div className="mt-2 flex flex-wrap w-1/5	">
           <button
-            className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
+            className={`flex items-center rounded border-2  m-1 px-4 py-1 text-xs ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `}
           >
             {deliveryIcon && (
               <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />

src/components/productTags/ProductTags.scss

@@ -1,3 +0,0 @@
-.product-tag-button {
-  @apply flex items-center rounded border-2  m-1 px-4 py-1 text-xs;
-}

tailwind.config.js

@@ -24,6 +24,7 @@ module.exports = {
       lightGreenTextColor: "#5DCE06",
       lightPurpleTextColor: "#A680FF",
       darkBlueTextColor: "#0615CE",
+      darkRedTextColor: "#CE3B06",
     }),
     backgroundColor: (theme) => ({
       ...theme("colors"),