parent
0a054dd1c3
commit
df6a12fea4
6 changed files with 12 additions and 338 deletions
@ -1 +0,0 @@ |
|||||||
/* No CSS *//*# sourceMappingURL=ProductDesign.css.map */ |
|
||||||
@ -1,9 +0,0 @@ |
|||||||
{ |
|
||||||
"version": 3, |
|
||||||
"mappings": "", |
|
||||||
"sources": [ |
|
||||||
"ProductDesign.scss" |
|
||||||
], |
|
||||||
"names": [], |
|
||||||
"file": "ProductDesign.css" |
|
||||||
} |
|
||||||
@ -1,324 +0,0 @@ |
|||||||
import React, { useEffect, useState } 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"; |
|
||||||
import Button from "../Button"; |
|
||||||
|
|
||||||
const ProductDesign = ({ |
|
||||||
colors, |
|
||||||
likeBtn, |
|
||||||
discount, |
|
||||||
discountPricePercent, |
|
||||||
discountPrice, |
|
||||||
productContent, |
|
||||||
star, |
|
||||||
productTags, |
|
||||||
priceDirection, |
|
||||||
productTitleAlignment, |
|
||||||
priceHolder, |
|
||||||
productHolderBorder, |
|
||||||
productHolderBorderColor, |
|
||||||
productTitleColor, |
|
||||||
productExcerptTextColor, |
|
||||||
productCat, |
|
||||||
productCatTextColor, |
|
||||||
rangeHolder, |
|
||||||
verticalImg, |
|
||||||
horizontalImg, |
|
||||||
rangeWidth, |
|
||||||
addToCartHolder, |
|
||||||
mainPriceTitle, |
|
||||||
}) => { |
|
||||||
const [progressFlag, setProgressFlag] = useState(false); |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
setTimeout(() => { |
|
||||||
setProgressFlag(true); |
|
||||||
}, 1000); |
|
||||||
}, []); |
|
||||||
|
|
||||||
return ( |
|
||||||
<section className="w-full sm:w-11/12 mx-auto p-0 sm:p-4 bg-white rounded-md shadow-md my-8"> |
|
||||||
{/* title holder */} |
|
||||||
<div className="flex items-center justify-between mb-6"> |
|
||||||
<h2 className="text-lg text-$productTitle">آیتم محصولات</h2> |
|
||||||
<button className="bg-indigo-500 text-white rounded shadow-lg p-2"> |
|
||||||
مشاهده تمام محصولات |
|
||||||
</button> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<p className="leading-10"> |
|
||||||
نام این کامپوننت |
|
||||||
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2"> |
|
||||||
productDesign |
|
||||||
</span> |
|
||||||
است و داخل این کامپوننت شما میتوانید با |
|
||||||
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2"> |
|
||||||
true - false |
|
||||||
</span> |
|
||||||
کردن |
|
||||||
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2"> |
|
||||||
Props |
|
||||||
</span> |
|
||||||
ها به صورت داینامیک دیزاین های مختلفی را مشاهده کنید شما همچنین |
|
||||||
میتوانید با تغییر دادن مقدار <span>PriceDirection</span> به یکی از این |
|
||||||
ها: |
|
||||||
<br /> |
|
||||||
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2"> |
|
||||||
flex-row/flex-row-reverse/flex-column/flex-column-reverse |
|
||||||
</span> |
|
||||||
دیزاین های متفاوتی را برای قسمت قیمت و اضافه کردن به سبد خرید هر محصول |
|
||||||
ببینید. |
|
||||||
</p> |
|
||||||
<p className="mt-4 leading-7 "> |
|
||||||
برای نمایش ستاره ها من از یک کامپوننت استفاده کردم ==== |
|
||||||
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2"> |
|
||||||
Star Rating |
|
||||||
</span> |
|
||||||
</p> |
|
||||||
</div> |
|
||||||
{/* product UI Design */} |
|
||||||
<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={`group w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm p-2 my-3 relative cursor-pointer ${productHolderBorder} ${productHolderBorderColor} hover:border-0`} |
|
||||||
> |
|
||||||
{/* product image */} |
|
||||||
<div className="w-full relative group"> |
|
||||||
{/* icons on image */} |
|
||||||
<div className="absolute left-2 top-2"> |
|
||||||
{discountPricePercent && ( |
|
||||||
<div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer"> |
|
||||||
<p className="text-discountPriceTitle font-sansbold text-xs"> |
|
||||||
23<span>%</span> |
|
||||||
</p> |
|
||||||
</div> |
|
||||||
)} |
|
||||||
{likeBtn && ( |
|
||||||
<div className="bg-likeBtnBg rounded-md py-1 flex justify-center mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer"> |
|
||||||
<img src={heart} alt="" className="w-5" /> |
|
||||||
</div> |
|
||||||
)} |
|
||||||
{discount && ( |
|
||||||
<div className="rounded-md mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer"> |
|
||||||
<img src={discountImg} alt="" className="w-full" /> |
|
||||||
</div> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
{/* img */} |
|
||||||
<div className=""> |
|
||||||
{verticalImg && ( |
|
||||||
<img |
|
||||||
src={book} |
|
||||||
alt="" |
|
||||||
className="w-full rounded-lg cursor-pointer" |
|
||||||
/> |
|
||||||
)} |
|
||||||
{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> |
|
||||||
{/* product content */} |
|
||||||
<div className="px-2"> |
|
||||||
<div className="mt-4"> |
|
||||||
<h2 |
|
||||||
className={`leading-4 text-base font-semibold ${productTitleColor} ${productTitleAlignment}`} |
|
||||||
> |
|
||||||
نسخه چاپی علموم تجربه هفتم |
|
||||||
</h2> |
|
||||||
{productContent && ( |
|
||||||
<p |
|
||||||
className={`text-justify mt-2 text-sm 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-sansbold 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" |
|
||||||
}`}
|
|
||||||
> |
|
||||||
{mainPriceTitle && ( |
|
||||||
<span className="text-xs text-borderColor ml-2"> |
|
||||||
قیمت |
|
||||||
</span> |
|
||||||
)} |
|
||||||
{/* price with line on it */} |
|
||||||
{discountPrice && ( |
|
||||||
<p className="line-through text-xs text-borderColor"> |
|
||||||
<span> قیمت</span> 140<span>تومان</span> |
|
||||||
</p> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
<p className="text-sm text-productPrice font-semibold inline"> |
|
||||||
130.000<span>تومان</span> |
|
||||||
</p> |
|
||||||
</div> |
|
||||||
{/* add to cart */} |
|
||||||
{addToCartHolder && ( |
|
||||||
<button |
|
||||||
className={`rounded-lg px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 ${ |
|
||||||
priceDirection.indexOf("col") !== -1 ? "w-full" : "" |
|
||||||
}`}
|
|
||||||
> |
|
||||||
اضافه کردن به سبد خرید |
|
||||||
</button> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
)} |
|
||||||
{productTags && ( |
|
||||||
<div className="mt-2 flex flex-wrap"> |
|
||||||
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs"> |
|
||||||
ارسال رایگان |
|
||||||
</button> |
|
||||||
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs"> |
|
||||||
برچسب های دیگر |
|
||||||
</button> |
|
||||||
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs"> |
|
||||||
دسته بندی به صورت کادو |
|
||||||
</button> |
|
||||||
</div> |
|
||||||
)} |
|
||||||
{rangeHolder && ( |
|
||||||
<div className="bg-rangeBgColor h-3 w-full rounded mt-2"> |
|
||||||
<div |
|
||||||
className={`bg-rangeFillBgColor h-3 rounded duration-500`} |
|
||||||
style={{ |
|
||||||
width: progressFlag ? rangeWidth : 0, |
|
||||||
}} |
|
||||||
></div> |
|
||||||
</div> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
{/* dark hover effect */} |
|
||||||
<div className="absolute right-0 bottom-0 h-full w-full group-hover:bg-blackBg group-hover:rounded group-hover:border transition duration-300 opacity-50"></div> |
|
||||||
<Button |
|
||||||
className={`group-hover:opacity-100 bg-blueBgColor text-white rounded p-2 text-xs opacity-0 absolute left-1/2 bottom-1/2 transform -translate-x-1/2 -translate-y-1/2`} |
|
||||||
text={"افزودن به سبد خرید"} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
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: true, |
|
||||||
likeBtn: true, |
|
||||||
discount: true, |
|
||||||
discountPricePercent: true, |
|
||||||
// product price
|
|
||||||
mainPriceTitle: false, |
|
||||||
discountPrice: true, |
|
||||||
priceHolder: true, |
|
||||||
|
|
||||||
productContent: true, |
|
||||||
star: true, |
|
||||||
productTags: true, |
|
||||||
productCat: true, |
|
||||||
rangeHolder: true, |
|
||||||
|
|
||||||
// دو مدل عکس طراحی کردم که یکی عرض بیشتری دارد یکی ارتفاع
|
|
||||||
verticalImg: true, |
|
||||||
horizontalImg: false, |
|
||||||
|
|
||||||
addToCartHolder: true, |
|
||||||
|
|
||||||
productTitleColor: "text-productTitle", |
|
||||||
|
|
||||||
productExcerptTextColor: "text-productContent", |
|
||||||
|
|
||||||
productCatTextColor: "text-darkCrimsonTextColor", |
|
||||||
// برای درصد دادن به عرض رنج
|
|
||||||
rangeWidth: "72%", |
|
||||||
//دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم
|
|
||||||
productHolderBorder: "border", |
|
||||||
productHolderBorderColor: "border-grayBorderColor", |
|
||||||
|
|
||||||
productTitleAlignment: "text-justify", |
|
||||||
//میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم
|
|
||||||
priceDirection: "flex-row", |
|
||||||
}; |
|
||||||
Loading…
Reference in new issue