master
mahdi 3 years ago
parent 2b918b6a4a
commit 1918dfb64a
  1. 24
      src/App.js
  2. 51
      src/components/productDesign/ProductDesign.js

@ -17,18 +17,18 @@ function App() {
return ( return (
<div className="App"> <div className="App">
<ProductDesign /> <ProductDesign />
<VodProductDesign /> {/* <VodProductDesign /> */}
<BookDesign /> {/* <BookDesign /> */}
<ButtonDesign /> {/* <ButtonDesign /> */}
<ProductTags /> {/* <ProductTags /> */}
<CounterDesign /> {/* <CounterDesign /> */}
<BlogDesign1 /> {/* <BlogDesign1 /> */}
<BlogDesign2 /> {/* <BlogDesign2 /> */}
<BlogDesign3 /> {/* <BlogDesign3 /> */}
<BlogDesign4 /> {/* <BlogDesign4 /> */}
<BlogDesign5 /> {/* <BlogDesign5 /> */}
<BlogDesign6 /> {/* <BlogDesign6 /> */}
<HeaderDesign1 /> {/* <HeaderDesign1 /> */}
</div> </div>
); );
} }

@ -30,7 +30,9 @@ const ProductDesign = ({
productHolderBorder, productHolderBorder,
productHolderBorderColor, productHolderBorderColor,
productTitleColor, productTitleColor,
productExcerptTextColor,
productCat, productCat,
productCatTextColor,
rangeHolder, rangeHolder,
verticalImg, verticalImg,
horizontalImg, horizontalImg,
@ -82,27 +84,29 @@ const ProductDesign = ({
<div <div
className={`w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`} 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"> <div className="w-full relative">
{/* icons on image */}
<div className="absolute left-2 top-2"> <div className="absolute left-2 top-2">
{discountPricePercent && ( {discountPricePercent && (
<div className="bg-discountPriceBg rounded-md px-2 py-2"> <div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2">
<p className="text-discountPriceTitle font-bold text-xs"> <p className="text-discountPriceTitle font-bold text-xs">
23<span>%</span> 23<span>%</span>
</p> </p>
</div> </div>
)} )}
{likeBtn && ( {likeBtn && (
<div className="bg-likeBtnBg rounded-md py-1 flex justify-center"> <div className="bg-likeBtnBg rounded-md py-1 flex justify-center mt-2">
<img src={heart} alt="" className="w-5" /> <img src={heart} alt="" className="w-5" />
</div> </div>
)} )}
{discount && ( {discount && (
<div className="absolute rounded-md"> <div className="absolute rounded-md mt-2">
<img src={discountImg} alt="" className="w-full" /> <img src={discountImg} alt="" className="w-full" />
</div> </div>
)} )}
</div> </div>
{/* img Holder */} {/* img */}
<div className="flex-shrink-0"> <div className="flex-shrink-0">
{verticalImg && ( {verticalImg && (
<img src={book} alt="" className="w-full rounded-lg" /> <img src={book} alt="" className="w-full rounded-lg" />
@ -118,52 +122,56 @@ const ProductDesign = ({
src={YellowDotIcon} src={YellowDotIcon}
alt="" alt=""
data-tip="زرد" data-tip="زرد"
className="w-3 h-3 ml-1" className="w-3 h-3 ml-1 cursor-pointer"
/> />
<ReactTooltip place="top" type="dark" effect="float" /> <ReactTooltip place="top" type="dark" effect="float" />
<img <img
src={RedDotIcon} src={RedDotIcon}
alt="" alt=""
data-tip="قرمز" data-tip="قرمز"
className="w-3 h-3 ml-1" className="w-3 h-3 ml-1 cursor-pointer"
/> />
<ReactTooltip place="top" type="dark" effect="float" /> <ReactTooltip place="top" type="dark" effect="float" />
<img <img
src={PurpleDotIcon} src={PurpleDotIcon}
alt="" alt=""
data-tip="بنفش" data-tip="بنفش"
className="w-3 h-3 ml-1" className="w-3 h-3 ml-1 cursor-pointer"
/> />
<ReactTooltip place="top" type="dark" effect="float" /> <ReactTooltip place="top" type="dark" effect="float" />
<img <img
src={LightBlueDotIcon} src={LightBlueDotIcon}
alt="" alt=""
data-tip="آبی" data-tip="آبی"
className="w-3 h-3 ml-1" className="w-3 h-3 ml-1 cursor-pointer"
/> />
<ReactTooltip place="top" type="dark" effect="float" /> <ReactTooltip place="top" type="dark" effect="float" />
</div> </div>
)} )}
</div> </div>
{/* product content */}
<div className="px-2"> <div className="px-2">
<div className="mt-4"> <div className="mt-4">
<h2 <h2
className={`text-productTitle leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`} className={`leading-4 text-base ${productTitleColor} ${productTitleAlignment}`}
> >
نسخه چاپی علموم تجربه هفتم نسخه چاپی علموم تجربه هفتم
</h2> </h2>
{productContent && ( {productContent && (
<p className="text-justify text-productContent mt-2 text-xs leading-6"> <p
className={`text-justify mt-2 text-sm leading-6 ${productExcerptTextColor}`}
>
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های
خوب دیگری نیز دارد. خوب دیگری نیز دارد.
</p> </p>
)} )}
{productCat && ( {productCat && (
<span className="text-darkCrimsonTextColor text-xs font-light"> <span className={`text-xs font-light ${productCatTextColor}`}>
پایه سوم پایه سوم
</span> </span>
)} )}
</div> </div>
{/* star */}
{star && ( {star && (
<div className="flex items-center mt-2"> <div className="flex items-center mt-2">
<StarRating /> <StarRating />
@ -172,11 +180,11 @@ const ProductDesign = ({
</span> </span>
</div> </div>
)} )}
{/* price */}
{priceHolder && ( {priceHolder && (
<div <div
className={`flex items-center justify-between ${priceDirection}`} className={`flex items-center justify-between ${priceDirection}`}
> >
{/* price */}
<div className="mt-2"> <div className="mt-2">
<div <div
className={`${ className={`${
@ -186,6 +194,7 @@ const ProductDesign = ({
<span className="text-xs text-borderColor ml-2"> <span className="text-xs text-borderColor ml-2">
قیمت قیمت
</span> </span>
{/* price with line on it */}
{discountPrice && ( {discountPrice && (
<p className="line-through text-xs text-borderColor mr-2"> <p className="line-through text-xs text-borderColor mr-2">
145<span>تومان</span> 145<span>تومان</span>
@ -240,16 +249,25 @@ export default ProductDesign;
// text-darkCrimsonTextColor // text-darkCrimsonTextColor
// text-productTitle // text-productTitle
// text color i used for product excerpt:
// text-productContent
// text color i used for product cat:
// text-darkCrimsonTextColor
ProductDesign.defaultProps = { ProductDesign.defaultProps = {
// icons on product image
colors: true, colors: true,
likeBtn: true, likeBtn: true,
discount: true, discount: true,
discountPricePercent: true, discountPricePercent: true,
// product price
discountPrice: true, discountPrice: true,
priceHolder: true,
productContent: true, productContent: true,
star: true, star: true,
productTags: true, productTags: true,
priceHolder: true,
productCat: true, productCat: true,
rangeHolder: true, rangeHolder: true,
@ -257,8 +275,11 @@ ProductDesign.defaultProps = {
verticalImg: true, verticalImg: true,
horizontalImg: false, horizontalImg: false,
productTitleColor: "text-darkCrimsonTextColor", productTitleColor: "text-productTitle",
productExcerptTextColor: "text-productContent",
productCatTextColor: "text-darkCrimsonTextColor",
// برای درصد دادن به عرض رنج // برای درصد دادن به عرض رنج
rangeWidth: "w-44", rangeWidth: "w-44",
//دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم //دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم
@ -269,5 +290,3 @@ ProductDesign.defaultProps = {
//میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم //میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم
priceDirection: "flex-row", priceDirection: "flex-row",
}; };
// border-2 border-productDesignBorderColor

Loading…
Cancel
Save