You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

258 lines
8.5 KiB

import React, { useState } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import separate from "../../utils/separate";
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,
imageSize,
}) => {
const [isHovering, setIsHovering] = useState(false);
return (
<Link
to={"/products/" + product.id}
className={`flex flex-wrap sm:flex-nowrap justify-around group`}
style={{ direction: "rtl" }}
>
<div className="w-full flex flex-wrap items-center justify-around">
<div
className={`w-full sm:w-60 md:w-72 rounded-lg p-2 my-3 hover:bg-grayF4 transition-all duration-500`}
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
>
{/* product image */}
<div className="w-full relative">
{/* icons on image */}
<div className="w-full absolute left-0 top-10">
{discountPricePercent && (
<div className="w-full bg-white 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 group`}
>
<img
src={`https://dnvn.ir/api/v1/file/${product.fileIds}`}
alt=""
style={{
height: `calc(100vh / ${imageSize})`,
width: `calc(100vh / ${imageSize} * 2 / 3.5)`,
}}
className="rounded-lg cursor-pointer py-5"
/>
</div>
</div>
{/* product content */}
<div className="w-full px-2">
<div className="w-full mt-4">
<h2
className={`leading-5 text-tiny font-normal py-2 text-right text-blue5F`}
>
{product?.product[1]?.name}
</h2>
{productContent && (
<p
className={`text-justify mt-2 text-xs leading-6 ${productExcerptTextColor}`}
>
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
دیگری نیز دارد.
</p>
)}
{productCat && (
<span className={`text-sm py-1 font-normal text-blueC0`}>
{"پایه" + " " + grades[product.gradeId]}
</span>
)}
</div>
{/* star */}
{star && (
<div className="flex items-center mt-3">
<StarRating value={starRate || 4} />
{/* <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 mt-2`}>
<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-lg text-productPrice font-semibold inline text-blue5F">
{separate(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>
</Link>
);
};
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,
};