update src/components/Blog/design2/index.js, src/components/SingleProduct/ProductDesign1/index.js and src/components/Tag/index.js

src/components/Blog/design2/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Button from "../../ButtonDesign/Button";
 import CommentIcon from "../../MiniComponents/CommentIcon";
-import NewTagDesign from "../../NewTagDesign";
+import TagDesign1 from "../../Tag/TagDesign1";
 
 const BlogDesign2 = ({
   blogTitle,
@@ -34,7 +34,7 @@ const BlogDesign2 = ({
         />
       )}
       {tagButton && (
-        <NewTagDesign
+        <TagDesign1
           title={"تگ"}
           icon={false}
           tagClassName={

src/components/SingleProduct/ProductDesign1/index.js

@@ -1,14 +1,17 @@
 import React, { useState } from "react";
 import ReactTooltip from "react-tooltip";
-import TagDesign1 from "../Tag/TagDesign1";
-
+import TagDesign1 from "../../Tag/TagDesign1";
+import ButtonDivTag from "../../ButtonDesign/ButtonDivTag";
+import Button from "../../ButtonDesign/Button";
 import StarRating from "../../Rating/StarRating1";
 
 const Design1 = ({
-  colors,
+  productHolderClassname,
+  discountPricePercent,
   likeBtn,
   discount,
-  discountPricePercent,
+
+  colors,
   discountPrice,
   productContent,
   star,
@@ -16,8 +19,6 @@ const Design1 = ({
   priceDirection,
   productTitleAlignment,
   priceHolder,
-  productHolderBorder,
-  productHolderBorderColor,
   productTitleColor,
   productExcerptTextColor,
   productCat,
@@ -28,59 +29,52 @@ const Design1 = ({
   rangeWidth,
   addToCartHolder,
 }) => {
-  const [isHovering, setIsHovering] = useState(false);
   return (
-    <div className="flex flex-wrap sm:flex-nowrap justify-around">
-      <div className="w-full flex flex-wrap items-center justify-around my-10 px-4">
-        <div
-          className={`w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
-        >
+    <div className={`w-fit ${productHolderClassname}`}>
       {/* product image */}
       <div className="w-full relative">
         {/* icons on image */}
-            <div className="absolute left-2 top-2">
+        <div className="flex flex-col gap-y-2 absolute left-2 top-2">
           {discountPricePercent && (
-                <div className="bg-discountPriceBg rounded-md px-2">
-                  <p className="text-discountPriceTitle font-bold text-xs">
-                    23<span>%</span>
-                  </p>
-                </div>
+            <ButtonDivTag
+              icon={false}
+              text={discountPricePercent + "%"}
+              className="p-2 bg-[#4ACA5322] text-xs text-[#4ACA53] font-sansbold rounded-md"
+            />
           )}
           {likeBtn && (
-                <div className="bg-likeBtnBg rounded-md flex justify-center my-2">
-                  <img
-                    src="images/SingleProductvuesax-linear-heart.svg"
-                    alt=""
-                    className="w-5"
+            <Button
+              className={"p-2 bg-[#FFF3F3] rounded"}
+              text={false}
+              icon={"images/SingleProductvuesax-linear-heart.svg"}
+              iconHolderClassName={""}
+              iconClassName={"w-5"}
             />
-                </div>
           )}
           {discount && (
-                <div className="rounded-md">
-                  <img
-                    src="images/SingleProductdiscount.png"
-                    alt=""
-                    className="w-full"
+            <Button
+              className={"rounded"}
+              text={false}
+              icon={"images/SingleProductdiscount.png"}
+              iconHolderClassName={""}
+              iconClassName={"w-10"}
             />
-                </div>
           )}
         </div>
-            {/* img */}
+        {/* image */}
         <div className="flex-shrink-0">
           {verticalImg && (
             <img
-                  src="images/SingleProductgoldon.png"
-                  alt=""
+              src={verticalImg}
+              alt="product"
               className="w-full rounded-lg cursor-pointer"
-                  onMouseEnter={() => setIsHovering(true)}
-                  onMouseLeave={() => setIsHovering(false)}
             />
           )}
           {horizontalImg && (
             <img
-                  src="images/SingleProductwatermelon.png"
-                  alt=""
-                  className="w-full rounded-lg"
+              src={horizontalImg}
+              alt="product"
+              className="w-full rounded-lg cursor-pointer"
             />
           )}
         </div>
@@ -117,13 +111,6 @@ const Design1 = ({
             <ReactTooltip place="top" type="dark" effect="float" />
           </div>
         )}
-            <div
-              className={`bg-blueBgColor text-white rounded p-2 text-xs absolute left-1/2 bottom-7 transform -translate-x-1/2 -translate-y-1/2 ${
-                isHovering ? "" : "hidden"
-              }`}
-            >
-              <button>افزودن به سبد خرید</button>
-            </div>
       </div>
       {/* product content */}
       <div className="px-2">
@@ -192,9 +179,9 @@ const Design1 = ({
           </div>
         )}
         {productTags && (
-              <div className="mt-2 flex flex-wrap">
+          <div className="mt-2 flex flex-wrap gap-2">
             {productTags.map((item, index) => (
-                  <TagDesign1 title={item} key={index} />
+              <TagDesign1 icon={false} title={item} key={index} />
             ))}
           </div>
         )}
@@ -207,29 +194,26 @@ const Design1 = ({
         )}
       </div>
     </div>
-      </div>
-    </div>
   );
 };
 
 export default Design1;
 
-// text colors i used for product title:
-// text-darkCrimsonTextColor
-// text-productTitle
+Design1.defaultProps = {
+  productHolderClassname: "rounded-lg shadow-sm p-2 border border-[#C3C3C3]",
 
-// text color i used for product excerpt:
-// text-productContent
+  // three buttons on top left side of the holder
+  discountPricePercent: "23",
+  likeBtn: true,
+  discount: true,
 
-// text color i used for product cat:
-// text-darkCrimsonTextColor
+  // دو مدل عکس طراحی کردم که یکی عرض بیشتری دارد یکی ارتفاع
+  verticalImg: "images/SingleProductgoldon.png",
+  horizontalImg: false,
+  // "images/SingleProductwatermelon.png"
 
-Design1.defaultProps = {
   // icons on product image
   colors: true,
-  likeBtn: true,
-  discount: true,
-  discountPricePercent: true,
   // product price
   discountPrice: true,
   priceHolder: true,
@@ -240,10 +224,6 @@ Design1.defaultProps = {
   productCat: true,
   rangeHolder: true,
 
-  // دو مدل عکس طراحی کردم که یکی عرض بیشتری دارد یکی ارتفاع
-  verticalImg: true,
-  horizontalImg: false,
-
   addToCartHolder: true,
 
   productTitleColor: "text-productTitle",
@@ -254,8 +234,6 @@ Design1.defaultProps = {
   // برای درصد دادن به عرض رنج
   rangeWidth: "w-44",
   //دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم
-  productHolderBorder: "border",
-  productHolderBorderColor: "border-grayBorderColor",
 
   productTitleAlignment: "text-justify",
   //میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم

src/components/Tag/index.js

@@ -1,10 +1,10 @@
 import React, { useState } from "react";
 
-import Design1 from "./TagDesign1";
+import TagDesign1 from "./TagDesign1";
 
 function Tag() {
   const list = {
-    1: <Design1 />,
+    1: <TagDesign1 />,
   };
   const [type, setType] = useState(1);
   return (