import React from "react"; import "./ProductDesign.scss"; import StarRating from "../starRating/StarRating"; import ReactTooltip from "react-tooltip"; import book from "../../assets/images/goldon.png"; import watermelon from "../../assets/images/watermelon.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, priceHolder, productHolderBorder, productHolderBorderColor, productTitleColor, productCat, rangeHolder, verticalImg, horizontalImg, rangeWidth, }) => { return (
{/* title holder */}

آیتم محصولات

نام این کامپوننت productDesign است و داخل این کامپوننت شما میتوانید با true - false کردن Props ها به صورت داینامیک دیزاین های مختلفی را مشاهده کنید شما همچنین میتوانید با تغییر دادن مقدار PriceDirection به یکی از این ها:
flex-row/flex-row-reverse/flex-column/flex-column-reverse دیزاین های متفاوتی را برای قسمت قیمت و اضافه کردن به سبد خرید هر محصول ببینید.

برای نمایش ستاره ها من از یک کامپوننت استفاده کردم ==== Star Rating

{/* product UI Design */}
{discountPricePercent && (

23%

)} {likeBtn && (
)} {discount && (
)}
{/* img Holder */}
{verticalImg && ( )} {horizontalImg && ( )}
{/* select Color */} {colors && (
)}

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

{productContent && (

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

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

145تومان

)}

145.000تومان

{/* add to cart */}
)} {productTags && (
)} {rangeHolder && (
)}
); }; export default ProductDesign; // text colors i used for product title: // text-darkCrimsonTextColor // text-productTitle ProductDesign.defaultProps = { colors: true, likeBtn: true, discount: true, discountPricePercent: true, discountPrice: true, productContent: true, star: true, productTags: true, priceHolder: true, productCat: true, rangeHolder: true, // دو مدل عکس طراحی کردم که یکی عرض بیشتری دارد یکی ارتفاع verticalImg: true, horizontalImg: false, productTitleColor: "text-darkCrimsonTextColor", // برای درصد دادن به عرض رنج rangeWidth: "w-44", //دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم productHolderBorder: "border", productHolderBorderColor: "border-grayBorderColor", productTitleAlignment: "text-justify", //میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم priceDirection: "flex-row", }; // border-2 border-productDesignBorderColor