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 book from "./goldon.png"; import heart from "./vuesax-linear-heart.svg"; import discountImg from "./discount.png"; const ProductDesign = ({ grades, likeBtn, discount, discountPricePercent, discountPrice, productContent, star, product, priceDirection, priceHolder, productExcerptTextColor, productCat, rangeHolder, rangeWidth, addToCartHolder, writeGHEIMAT, hoverMode, starRate, imageSize, type }) => { const [isHovering, setIsHovering] = useState(false); return ( <Link to={"/products/" + product.id} className={`flex flex-wrap sm:flex-nowrap justify-around transition-all 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 transform hover:-translate-y-5 transition-all duration-500 border border-solid border-gray-200 hover:border-greenB9 hover:border-2`} 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-greenD8 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 font-semibold text-base"> <h2 className={`leading-5 text-tiny font-normal py-2 text-right text-blue5F`} > {product?.product[type]?.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-green4F"> {separate(product.product[type]?.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); ProductDesign.defaultProps = { // icons on product image type : 0, 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, };