import React, { useState } from "react"; import ReactTooltip from "react-tooltip"; import TagDesign1 from "../Tag/TagDesign1"; import StarRating from "../../Rating/StarRating1"; const Design1 = ({ colors, likeBtn, discount, discountPricePercent, discountPrice, productContent, star, productTags, priceDirection, productTitleAlignment, priceHolder, productHolderBorder, productHolderBorderColor, productTitleColor, productExcerptTextColor, productCat, productCatTextColor, rangeHolder, verticalImg, horizontalImg, rangeWidth, addToCartHolder, }) => { const [isHovering, setIsHovering] = useState(false); return (
{/* product image */}
{/* icons on image */}
{discountPricePercent && (

23%

)} {likeBtn && (
)} {discount && (
)}
{/* img */}
{verticalImg && ( setIsHovering(true)} onMouseLeave={() => setIsHovering(false)} /> )} {horizontalImg && ( )}
{/* select Color */} {colors && (
)}
{/* product content */}

نسخه چاپی علموم تجربه هفتم

{productContent && (

این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب دیگری نیز دارد.

)} {productCat && ( پایه سوم )}
{/* star */} {star && (
39
)} {/* price */} {priceHolder && (
قیمت {/* price with line on it */} {discountPrice && (

145تومان

)}

145.000تومان

{/* add to cart */} {addToCartHolder && ( )}
)} {productTags && (
{productTags.map((item, index) => ( ))}
)} {rangeHolder && (
)}
); }; export default Design1; // 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 Design1.defaultProps = { // icons on product image colors: true, likeBtn: true, discount: true, discountPricePercent: true, // product price discountPrice: true, priceHolder: true, productContent: true, star: true, productTags: ["ارسال رایگان", "برچسب های دیگر", "دسته بندی به صورت کادو"], productCat: true, rangeHolder: true, // دو مدل عکس طراحی کردم که یکی عرض بیشتری دارد یکی ارتفاع verticalImg: true, horizontalImg: false, addToCartHolder: true, productTitleColor: "text-productTitle", productExcerptTextColor: "text-productContent", productCatTextColor: "text-darkCrimsonTextColor", // برای درصد دادن به عرض رنج rangeWidth: "w-44", //دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم productHolderBorder: "border", productHolderBorderColor: "border-grayBorderColor", productTitleAlignment: "text-justify", //میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم priceDirection: "flex-row", };