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";

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
}) => {
  const [isHovering, setIsHovering] = useState(false);
  return (
    <div className="flex flex-wrap sm:flex-nowrap justify-around w-48 m-3">
      <div className="w-full flex flex-wrap items-center justify-around my-5 mx-5 px-4">
        <div
          className={`w-full sm:w-60 md:w-72 mx-5 rounded-lg transition-all p-2 my-3 ${productHolderBorder} ${productHolderBorderColor} hover:${productHolderHoverBorder}`}
        >
          {/* product image */}
          <div className="w-full relative">
            {/* icons on image */}
            <div className="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>
              )}
              {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 h-48 flex bg-grayF4 p-0 justify-center rounded-lg">
              {verticalImg && (
                <img
                  src={productImg}
                  alt=""
                  className="h-full rounded-lg cursor-pointer py-8"
                  onMouseEnter={() => setIsHovering(true)}
                  onMouseLeave={() => setIsHovering(false)}
                />
              )}
              {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
              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">
            <div className="mt-4">
              <h2
                className={`leading-4 text-xs ${productTitleColor} ${productTitleAlignment}`}
              >
                {productName}
              </h2>
              {productContent && (
                <p
                  className={`text-justify mt-2 text-xs leading-6 ${productExcerptTextColor}`}
                >
                  این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
                  دیگری نیز دارد.
                </p>
              )}
              {productCat && (
                <span className={`text-sm font-light ${productCatTextColor}`}>
                  {productCat}
                </span>
              )}
            </div>
            {/* star */}
            {star && (
              <div className="flex items-center mt-2">
                <StarRating />
                <span className="text-sm-1 text-productContent font-bold 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-sm 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>
            )}
            {/* {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
};