danovinTasks/src/components/productDesign/ProductDesign.js

import React from "react";
import "./ProductDesign.scss";
import StarRating from "../starRating/StarRating";

import book from "../../assets/images/goldon.png";
import heart from "../../assets/icons/vuesax-linear-heart.svg";
import discountImg from "../../assets/icons/discount.png";

import YellowDotIcon from "../../assets/icons/yellowDotIcon.svg";
import RedDotIcon from "../../assets/icons/redDotIcon.svg";
import PurpleDotIcon from "../../assets/icons/purpleDotIcon.svg";
import LightBlueDotIcon from "../../assets/icons/lightBlueDotIcon.svg";

const ProductDesign = ({
  colors,
  likeBtn,
  discount,
  discountPricePercent,
  discountPrice,
  productContent,
  star,
  productTags,
  priceDirection,
  productTitleAlignment,
}) => {
  return (
    <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
      {/* title holder */}
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-lg text-$productTitle">آیتم محصولات</h2>
        <button className="bg-indigo-500 text-white rounded shadow-lg p-2">
          مشاهده تمام محصولات
        </button>
      </div>
      <div>
        <p className="leading-10">
          نام این کامپوننت
          <span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
            productDesign
          </span>
          است و داخل این کامپوننت شما میتوانید با
          <span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
            ture - false
          </span>
          کردن
          <span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
            Props
          </span>
          ها به صورت داینامیک دیزاین های مختلفی را مشاهده کنید شما همچنین
          میتوانید با تغییر دادن مقدار <span>PriceDirection</span> به یکی از این
          ها:
          <br />
          <span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
            flex-row/flex-row-reverse/flex-column/flex-column-reverse
          </span>
          دیزاین های متفاوتی را برای قسمت قیمت و اضافه کردن به سبد خرید هر محصول
          ببینید.
        </p>
        <p className="mt-4 leading-7	">
          برای نمایش ستاره ها من از یک کامپوننت استفاده کردم ====
          <span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
            Star Rating
          </span>
        </p>
      </div>
      {/* product UI Design */}
      <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 border-2 border-productDesignBorderColor p-2 my-3">
            <div className="w-full relative">
              {discountPricePercent && (
                <div className="bg-discountPriceBg absolute left-2 top-4 rounded-md px-2 py-1">
                  <p className="text-discountPriceTitle font-bold text-xs">
                    23<span>%</span>
                  </p>
                </div>
              )}
              {likeBtn && (
                <div className="bg-likeBtnBg absolute left-2 top-10 rounded-md p-1">
                  <img src={heart} alt="" className="w-full" />
                </div>
              )}
              {discount && (
                <div className="absolute left-2 top-20 rounded-md">
                  <img src={discountImg} alt="" className="w-full" />
                </div>
              )}
              {/* img Holder */}
              <div className="flex-shrink-0">
                <img src={book} alt="" className="w-full rounded-lg" />
              </div>
              {/* select Color */}
              {colors && (
                <div className="flex items-center absolute right-2 bottom-2">
                  <img src={YellowDotIcon} alt="" />
                  <img src={RedDotIcon} alt="" />
                  <img src={PurpleDotIcon} alt="" />
                  <img src={LightBlueDotIcon} alt="" />
                </div>
              )}
            </div>
            <div className="mt-4">
              <h2
                className={`text-productTitle leading-4 text-base 2xl:text-lg ${productTitleAlignment}`}
              >
                نسخه چاپی علموم تجربه هفتم
              </h2>
              {productContent && (
                <p className="text-justify text-productContent mt-2 text-sm leading-6">
                  این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
                  دیگری نیز دارد.
                </p>
              )}
            </div>
            {star && (
              <div className="flex items-center mt-2">
                <StarRating />
                <span className="text-xs text-productContent font-bold mr-2">
                  39
                </span>
              </div>
            )}
            <div
              className={`flex items-center justify-between ${priceDirection}`}
            >
              {/* price */}
              <div className="mt-2">
                <div
                  className={`${
                    priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
                  }`}
                >
                  <span className="text-xs text-borderColor ml-2">قیمت</span>
                  {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">
                  145.000<span>تومان</span>
                </p>
              </div>
              {/* add to cart */}
              <button
                className={`rounded-2xl px-2 py-3 border text-xs text-productPrice ${
                  priceDirection.indexOf("col") !== -1 ? "w-full" : ""
                }`}
              >
                اضافه کردن به سبد خرید
              </button>
            </div>
            {productTags && (
              <div className="mt-2 flex flex-wrap">
                <button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
                  ارسال رایگان
                </button>
                <button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
                  برچسب های دیگر
                </button>
                <button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
                  دسته بندی به صورت کادو
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

export default ProductDesign;

ProductDesign.defaultProps = {
  colors: true,
  likeBtn: true,
  discount: true,
  discountPricePercent: true,
  discountPrice: true,
  productContent: true,
  star: true,
  productTags: true,
  priceDirection: "flex-row",
  productTitleAlignment: "text-justify",
};