application_17/src/components/Product/index.js

import React, { useState } from "react";
import {connect} from 'react-redux';

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 = ({
  grades,
  colors,
  likeBtn,
  discount,
  discountPricePercent,
  discountPrice,
  productContent,
  star,
  productTags,
  product,
  priceDirection,
  productTitleAlignment,
  priceHolder,
  productHolderBorder,
  productHolderBorderColor,
  productTitleColor,
  productExcerptTextColor,
  productCat,
  productCatTextColor,
  rangeHolder,
  verticalImg,
  rangeWidth,
  addToCartHolder,
  productName,
  productPrice,
  writeGHEIMAT,
  numberOfRegards,
  productHolderHoverBorder,
  hoverMode,
  starRate,
}) => {
  const [isHovering, setIsHovering] = useState(false);
  return (
    <div
      className={`flex flex-wrap sm:flex-nowrap justify-around`}
      style={{ direction : 'rtl' }}
    >
      <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 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 flex bg-grayF4 p-0 justify-center rounded-lg`}
            >
              {verticalImg && (
                <img
                  src={`https://dnvn.ir/api/v1/file/${product.fileIds}`}
                  alt=""
                  className="rounded-lg cursor-pointer py-5"
                  style={{height : 'calc(100vw / 5.1)', width : 'calc(100% - 75px)'}}
                />
              )}
            </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}`}
              >
                {product?.product[1]?.name}
              </h2>
              {productContent && (
                <p
                  className={`text-justify mt-2 text-xs leading-6 ${productExcerptTextColor}`}
                >
                  این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
                  دیگری نیز دارد.
                </p>
              )}
              {productCat && (
                <span
                  className={`text-md py-1 font-light ${productCatTextColor}`}
                >
                  {grades[product.gradeId]}
                </span>
              )}
            </div>
            {/* star */}
            {star && (
              <div className="flex items-center mt-3">
                <StarRating value={starRate} />
                <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">
                    {product?.product[1]?.price} <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>
  );
};

const mapStateToProps = (state) => ({
  grades : state.publicApi.grades,
})

export default connect(mapStateToProps)(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,
};