parent
8294d3f69c
commit
22005d826a
11 changed files with 354 additions and 8 deletions
|
After Width: | Height: | Size: 868 B |
|
After Width: | Height: | Size: 86 KiB |
@ -0,0 +1,265 @@ |
||||
import React, { useState } from "react"; |
||||
|
||||
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"; |
||||
|
||||
const ProductDesign = ({ |
||||
colors, |
||||
likeBtn, |
||||
discount, |
||||
discountPricePercent, |
||||
discountPrice, |
||||
productContent, |
||||
star, |
||||
productTags, |
||||
priceDirection, |
||||
productTitleAlignment, |
||||
priceHolder, |
||||
productHolderBorder, |
||||
productHolderBorderColor, |
||||
productTitleColor, |
||||
productExcerptTextColor, |
||||
productCat, |
||||
productCatTextColor, |
||||
rangeHolder, |
||||
verticalImg, |
||||
horizontalImg, |
||||
rangeWidth, |
||||
addToCartHolder, |
||||
productName, |
||||
productGrade, |
||||
productPrice, |
||||
productImg |
||||
}) => { |
||||
const [isHovering, setIsHovering] = useState(false); |
||||
return ( |
||||
<div className="flex flex-wrap sm:flex-nowrap justify-around w-48"> |
||||
<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 p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`} |
||||
> |
||||
{/* product image */} |
||||
<div className="w-full relative"> |
||||
{/* icons on image */} |
||||
<div className="absolute left-2 top-2"> |
||||
{discountPricePercent && ( |
||||
<div className="bg-discountPriceBg rounded-md px-2"> |
||||
<p className="text-discountPriceTitle font-bold text-xs"> |
||||
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 h-48 flex bg-gray-200 p-0 justify-center rounded-lg"> |
||||
{verticalImg && ( |
||||
<img |
||||
src={productImg} |
||||
alt="" |
||||
className="h-full rounded-lg cursor-pointer py-8" |
||||
onMouseEnter={() => setIsHovering(true)} |
||||
onMouseLeave={() => setIsHovering(false)} |
||||
/> |
||||
)} |
||||
{horizontalImg && ( |
||||
<img src={watermelon} alt="" className="w-full rounded-lg" /> |
||||
)} |
||||
</div> |
||||
{/* select Color */} |
||||
{/* {colors && ( |
||||
<div className="flex items-center absolute right-2 bottom-2"> |
||||
<img |
||||
src={YellowDotIcon} |
||||
alt="" |
||||
data-tip="زرد" |
||||
className="w-3 h-3 ml-1 cursor-pointer" |
||||
/> |
||||
<ReactTooltip place="top" type="dark" effect="float" /> |
||||
<img |
||||
src={RedDotIcon} |
||||
alt="" |
||||
data-tip="قرمز" |
||||
className="w-3 h-3 ml-1 cursor-pointer" |
||||
/> |
||||
<ReactTooltip place="top" type="dark" effect="float" /> |
||||
<img |
||||
src={PurpleDotIcon} |
||||
alt="" |
||||
data-tip="بنفش" |
||||
className="w-3 h-3 ml-1 cursor-pointer" |
||||
/> |
||||
<ReactTooltip place="top" type="dark" effect="float" /> |
||||
<img |
||||
src={LightBlueDotIcon} |
||||
alt="" |
||||
data-tip="آبی" |
||||
className="w-3 h-3 ml-1 cursor-pointer" |
||||
/> |
||||
<ReactTooltip place="top" type="dark" effect="float" /> |
||||
</div> |
||||
)} */} |
||||
<div |
||||
className={`bg-blueBgColor text-white rounded p-2 text-xs absolute left-1/2 bottom-7 transform -translate-x-1/2 -translate-y-1/2 ${ |
||||
isHovering ? "" : "hidden" |
||||
}`}
|
||||
> |
||||
{/* <button>افزودن به سبد خرید</button> */} |
||||
</div> |
||||
</div> |
||||
{/* product content */} |
||||
<div className="px-2"> |
||||
<div className="mt-4"> |
||||
<h2 |
||||
className={`leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`} |
||||
> |
||||
{productName} |
||||
</h2> |
||||
{productContent && ( |
||||
<p |
||||
className={`text-justify mt-2 text-xs leading-6 ${productExcerptTextColor}`} |
||||
> |
||||
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب |
||||
دیگری نیز دارد. |
||||
</p> |
||||
)} |
||||
{productCat && ( |
||||
<span className={`text-xs font-light ${productCatTextColor}`}> |
||||
{productGrade} |
||||
</span> |
||||
)} |
||||
</div> |
||||
{/* star */} |
||||
{star && ( |
||||
<div className="flex items-center mt-2"> |
||||
<StarRating /> |
||||
<span className="text-xs text-productContent font-bold mr-2"> |
||||
39 |
||||
</span> |
||||
</div> |
||||
)} |
||||
{/* price */} |
||||
{priceHolder && ( |
||||
<div |
||||
className={`flex items-center justify-between ${priceDirection}`} |
||||
> |
||||
<div className="mt-2"> |
||||
<div |
||||
className={`${ |
||||
priceDirection.indexOf("col") !== -1 ? "inline" : "flex" |
||||
}`}
|
||||
> |
||||
<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-sm text-productPrice font-semibold inline"> |
||||
{productPrice}<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> |
||||
)} |
||||
{/* {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> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default 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 |
||||
}; |
||||
|
After Width: | Height: | Size: 177 B |
|
After Width: | Height: | Size: 177 B |
|
After Width: | Height: | Size: 177 B |
|
After Width: | Height: | Size: 675 B |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 177 B |
Loading…
Reference in new issue