parent
76aa230922
commit
52c8330f0c
3 changed files with 305 additions and 26 deletions
@ -0,0 +1,263 @@ |
|||||||
|
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 ( |
||||||
|
<div className="flex flex-wrap sm:flex-nowrap justify-around"> |
||||||
|
<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="images/SingleProductvuesax-linear-heart.svg" |
||||||
|
alt="" |
||||||
|
className="w-5" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
{discount && ( |
||||||
|
<div className="rounded-md"> |
||||||
|
<img |
||||||
|
src="images/SingleProductdiscount.png" |
||||||
|
alt="" |
||||||
|
className="w-full" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{/* img */} |
||||||
|
<div className="flex-shrink-0"> |
||||||
|
{verticalImg && ( |
||||||
|
<img |
||||||
|
src="images/SingleProductgoldon.png" |
||||||
|
alt="" |
||||||
|
className="w-full rounded-lg cursor-pointer" |
||||||
|
onMouseEnter={() => setIsHovering(true)} |
||||||
|
onMouseLeave={() => setIsHovering(false)} |
||||||
|
/> |
||||||
|
)} |
||||||
|
{horizontalImg && ( |
||||||
|
<img |
||||||
|
src="images/SingleProductwatermelon.png" |
||||||
|
alt="" |
||||||
|
className="w-full rounded-lg" |
||||||
|
/> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{/* select Color */} |
||||||
|
{colors && ( |
||||||
|
<div className="flex items-center absolute right-2 bottom-2"> |
||||||
|
<img |
||||||
|
src="images/SingleProductyellowDotIcon.svg" |
||||||
|
alt="" |
||||||
|
data-tip="زرد" |
||||||
|
className="w-3 h-3 ml-1 cursor-pointer" |
||||||
|
/> |
||||||
|
<ReactTooltip place="top" type="dark" effect="float" /> |
||||||
|
<img |
||||||
|
src="images/SingleProductredDotIcon.svg" |
||||||
|
alt="" |
||||||
|
data-tip="قرمز" |
||||||
|
className="w-3 h-3 ml-1 cursor-pointer" |
||||||
|
/> |
||||||
|
<ReactTooltip place="top" type="dark" effect="float" /> |
||||||
|
<img |
||||||
|
src="images/SingleProductpurpleDotIcon.svg" |
||||||
|
alt="" |
||||||
|
data-tip="بنفش" |
||||||
|
className="w-3 h-3 ml-1 cursor-pointer" |
||||||
|
/> |
||||||
|
<ReactTooltip place="top" type="dark" effect="float" /> |
||||||
|
<img |
||||||
|
src="images/SingleProductlightBlueDotIcon.svg" |
||||||
|
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}`} |
||||||
|
> |
||||||
|
نسخه چاپی علموم تجربه هفتم |
||||||
|
</h2> |
||||||
|
{productContent && ( |
||||||
|
<p |
||||||
|
className={`text-justify mt-2 text-xs leading-6 ${productExcerptTextColor}`} |
||||||
|
> |
||||||
|
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب |
||||||
|
دیگری نیز دارد. |
||||||
|
</p> |
||||||
|
)} |
||||||
|
{productCat && ( |
||||||
|
<span className={`text-xs font-light ${productCatTextColor}`}> |
||||||
|
پایه سوم |
||||||
|
</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"> |
||||||
|
145.000<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) => ( |
||||||
|
<TagDesign1 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 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", |
||||||
|
}; |
||||||
@ -1,31 +1,25 @@ |
|||||||
import React from "react"; |
import React, { useState } from "react"; |
||||||
|
|
||||||
import blackCancleIcon from "../../assets/icons/black-cancle-icon.svg"; |
import Design1 from "./TagDesign1"; |
||||||
|
|
||||||
const ProductTags = ({ |
function Tag() { |
||||||
titleColor, |
const list = { |
||||||
title, |
1: <Design1 />, |
||||||
tagBgColor, |
}; |
||||||
tagBorderColor, |
const [type, setType] = useState(1); |
||||||
icon, |
|
||||||
}) => { |
|
||||||
return ( |
return ( |
||||||
<button |
<div className="w-full flex flex-col items-center"> |
||||||
className={`flex flex-row items-center rounded border-2 m-1 px-2 py-0.5 text-base ${titleColor} ${tagBorderColor} ${tagBgColor} `} |
<select |
||||||
|
className="mb-10 w-20 bg-gray-200" |
||||||
|
onChange={(e) => setType(e.target.value)} |
||||||
> |
> |
||||||
{title} |
{Object.keys(list).map((option, index) => ( |
||||||
{icon && <img src={icon} alt="" className="mr-5 w-2.5" />} |
<option key={index}>{option}</option> |
||||||
</button> |
))} |
||||||
|
</select> |
||||||
|
{list[type]} |
||||||
|
</div> |
||||||
); |
); |
||||||
}; |
} |
||||||
|
|
||||||
export default ProductTags; |
export default Tag; |
||||||
|
|
||||||
ProductTags.defaultProps = { |
|
||||||
title: "کتاب", |
|
||||||
titleColor: "text-blue-600", |
|
||||||
tagBgColor: "bg-blue-300 bg-opacity-10", |
|
||||||
tagBorderColor: "border-blue-200", |
|
||||||
// for icons
|
|
||||||
icon: blackCancleIcon, |
|
||||||
}; |
|
||||||
|
|||||||
Loading…
Reference in new issue