application_17/src/components/Product/index.js

import React, { useState } from "react";

import StarRating from "../StarRating";
// import Tag from "../Tag";
// import ReactTooltip from "react-tooltip";

import book from "./goldon.png";
import watermelon from "./watermelon.png";
import heart from "./vuesax-linear-heart.svg";
import discountImg from "./discount.png";
import YellowDotIcon from "./yellowDotIcon.svg";
import RedDotIcon from "./redDotIcon.svg";
import PurpleDotIcon from "./purpleDotIcon.svg";
import LightBlueDotIcon from "./lightBlueDotIcon.svg";
import StarRatingComponent from "react-star-rating-component";

const ProductDesign = ({
  colors,
  likeBtn,
  discount,
  discountPricePercent,
  discountPrice,
  productContent,
  star,
  productTags,
  priceDirection,
  productTitleAlignment,
  priceHolder,
  productHolderBorder,
  productHolderBorderColor,
  productTitleColor,
  productExcerptTextColor,
  productCat,
  productCatTextColor,
  rangeHolder,
  verticalImg,
  horizontalImg,
  rangeWidth,
  addToCartHolder,
  productName,
  productPrice,
  productImg,
  writeGHEIMAT,
  numberOfRegards,
  productHolderHoverBorder,
  hoverMode,
  big,
  starRate
}) => {
  const [isHovering, setIsHovering] = useState(false);
  return (
    <div className={`flex flex-wrap sm:flex-nowrap justify-around ${big ? 'm' : 'w-48 m-2'} `}
    style={big ? {width: '300px'} : {}}
    
    >
      <div className="w-full flex flex-wrap items-center justify-around my-5 px-4" >
        <div
          className={`w-full sm:w-60 md:w-72 ${big ? '' : 'mx-5'} rounded-lg transition-all p-2 my-3 ${productHolderBorder} ${hoverMode == 'blue' ? 'hover:bg-grayF4' : null} ${productHolderBorderColor} hover:${productHolderHoverBorder} hover:` }
          onMouseEnter={() => setIsHovering(true)}
          onMouseLeave={() => setIsHovering(false)}
        >
          {/* product image */}
          <div className="w-full relative">
            {/* icons on image */}
            <div className="absolute left-0 top-10">
              {discountPricePercent && (
                <div className="bg-discountPriceBg bg-white w-full p-2 px-3">
                  <p className="text-discountPriceTitle font-bold text-md text-blueC0">
                    23<span>%</span>
                  </p>
                </div>
              )}
              {likeBtn && (
                <div className="bg-likeBtnBg rounded-md flex justify-center my-2">
                  <img src={heart} alt="" className="w-5" />
                </div>
              )}
              {discount && (
                <div className="rounded-md">
                  <img src={discountImg} alt="" className="w-full" />
                </div>
              )}
            </div>
            {/* img */}
            <div className={`w-full ${big ? 'h-60' : 'h-48'} flex bg-grayF4 p-0 justify-center rounded-lg`}>
              {verticalImg && (
                <img
                  src={productImg}
                  alt=""
                  className="h-full rounded-lg cursor-pointer py-5"
                  
                />
              )}
              {horizontalImg && (
                <img src={watermelon} alt="" className="w-full rounded-lg" />
              )}
            </div>
            {/* select Color */}
            {/* {colors && (
              <div className="flex items-center absolute right-2 bottom-2">
                <img
                  src={YellowDotIcon}
                  alt=""
                  data-tip="زرد"
                  className="w-3 h-3 ml-1 cursor-pointer"
                />
                <ReactTooltip place="top" type="dark" effect="float" />
                <img
                  src={RedDotIcon}
                  alt=""
                  data-tip="قرمز"
                  className="w-3 h-3 ml-1 cursor-pointer"
                />
                <ReactTooltip place="top" type="dark" effect="float" />
                <img
                  src={PurpleDotIcon}
                  alt=""
                  data-tip="بنفش"
                  className="w-3 h-3 ml-1 cursor-pointer"
                />
                <ReactTooltip place="top" type="dark" effect="float" />
                <img
                  src={LightBlueDotIcon}
                  alt=""
                  data-tip="آبی"
                  className="w-3 h-3 ml-1 cursor-pointer"
                />
                <ReactTooltip place="top" type="dark" effect="float" />
              </div>
            )} */}

          </div>
          {/* product content */}
          <div className="px-2">
            <div className="mt-4">
              <h2
                className={`leading-4 text-xl font-black py-2 ${productTitleColor} ${productTitleAlignment}`}
              >
                {productName}
              </h2>
              {productContent && (
                <p
                  className={`text-justify mt-2 text-xs leading-6 ${productExcerptTextColor}`}
                >
                  این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
                  دیگری نیز دارد.
                </p>
              )}
              {productCat && (
                <span className={`text-md py-1 font-light ${productCatTextColor}`}>
                  {productCat}
                </span>
              )}
            </div>
            {/* star */}
            {star && (
              <div className="flex items-center mt-3">
                <StarRating value={starRate} size={big ? '' : 'small'}/>
                <span className="text-xs text-productContent font-bold text-gray-500 mr-2">
                  بر اساس {numberOfRegards} بررسی
                </span>
              </div>
            )}
            {/* price */}
            {priceHolder && (
              <div
                className={`flex items-center justify-between ${priceDirection}`}
              >
                <div className="mt-2">
                  <div
                    className={`${priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
                      }`}
                  >
                    {writeGHEIMAT && <span className="text-xs text-borderColor ml-2">قیمت</span>}
                    {/* price with line on it */}
                    {discountPrice && (
                      <p className="line-through text-xs text-borderColor mr-2">
                        145<span>تومان</span>
                      </p>
                    )}
                  </div>
                  <p className="text-xl text-productPrice font-semibold inline text-blue5F">
                    {productPrice} <span>تومان</span>
                  </p>
                </div>
                {/* add to cart */}
                {addToCartHolder && (
                  <button
                    className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 hover:-translate-y-2 ${priceDirection.indexOf("col") !== -1 ? "w-full" : ""
                      }`}
                  >
                    اضافه کردن به سبد خرید
                  </button>

                )}


              </div>

            )}


            
        {hoverMode == 'blue' ?<div className="w-full flex justify-center mt-4">
              <div
                className={`bg-blueC0 text-white rounded p-4 text-xs justify-center ${isHovering ? "" : "hidden"
                  }`}
              >
                <button>افزودن به سبد خرید</button>
              </div>
            </div> : null}

            {/* {productTags && (
              <div className="mt-2 flex flex-wrap">
                {
                  productTags.map((item, index) => <Tag title={item} key={index} />)
                }
              </div>
            )} */}
            {rangeHolder && (
              <div className="bg-rangeBgColor h-3 w-full rounded mt-2">
                <div
                  className={`bg-rangeFillBgColor h-3 rounded ${rangeWidth}`}
                ></div>
              </div>
            )}

          </div>
        </div>
      </div>
    </div>
  );
};

export default ProductDesign;

// text colors i used for product title:
// text-darkCrimsonTextColor
// text-productTitle

// text color i used for product excerpt:
// text-productContent

// text color i used for product cat:
// text-darkCrimsonTextColor

ProductDesign.defaultProps = {
  // icons on product image
  colors: false,
  likeBtn: false,
  discount: false,
  discountPricePercent: false,
  // product price
  discountPrice: false,
  priceHolder: true,

  productContent: false,
  star: true,
  productTags: [],
  productCat: true,
  rangeHolder: true,

  // دو مدل عکس طراحی کردم که یکی عرض بیشتری دارد یکی ارتفاع
  verticalImg: true,
  horizontalImg: false,

  addToCartHolder: false,

  productTitleColor: "text-productTitle",

  productExcerptTextColor: "text-productContent",

  productCatTextColor: "text-darkCrimsonTextColor",
  // برای درصد دادن به عرض رنج
  rangeWidth: "w-44",
  //دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم
  productHolderBorder: "border",
  productHolderBorderColor: "border-grayBorderColor",

  productTitleAlignment: "text-justify",
  //میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم
  priceDirection: "flex-row",
  productImg: book,
  writeGHEIMAT: false
};