mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
master
mahdi 3 years ago
parent aef7590ded
commit 66b7ade3bc
1 changed files with 460 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 461
      src/components/productDesign/ProductDesign.js

461
src/components/productDesign/ProductDesign.js
Unescape View File

@ -27,7 +27,30 @@ const ProductDesign = ({
مشاهده تمام محصولات مشاهده تمام محصولات
</button> </button>
</div> </div>
<div className="flex justify-around"> <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">
ture - false
</span>
کردن
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
Props
</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>
<div className="flex flex-wrap sm:flex-nowrap justify-around">
{/* product items1 */} {/* product items1 */}
<div className="product-items-holder"> <div className="product-items-holder">
{/* item1 */} {/* item1 */}
@ -137,6 +160,442 @@ const ProductDesign = ({
)} )}
</div> </div>
</div> </div>
{/* product items2 */}
<div className="product-items-holder">
{/* item1 */}
<div className="product-item">
{/*star img holder*/}
<div className="w-full relative">
{discountPricePercent && (
<div className="discountPriceBtn">
<p className="dicountPriceNum">
23<span>%</span>
</p>
</div>
)}
{likeBtn && (
<div className="likeBtnBg">
<img src={heart} alt="" className="w-full" />
</div>
)}
{discount && (
<div className="discountBtn">
<img src={discountImg} alt="" className="w-full" />
</div>
)}
{/* img Holder */}
<div className="flex-shrink-0">
<img src={book} alt="" className="w-full rounded-lg" />
</div>
{/* select Color */}
{colors && (
<div className="absolute right-2 bottom-2">
<ul className="flex ">
<li className="ml-1 text-selectColor1">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor2">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor3">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor4">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
</ul>
</div>
)}
</div>
{/* content holder */}
<div className="mt-4">
<h2 className={`productTitle ${productTitleAlignment}`}>
نسخه چاپی علموم تجربه هفتم
</h2>
{productContent && (
<p className="productContent">
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
دیگری نیز دارد.
</p>
)}
</div>
{/* star holder */}
{star && (
<div className="flex items-center mt-2">
<StarRating />
<span className="text-xs text-productContent font-bold mr-2">
39
</span>
</div>
)}
{/* price holder */}
<div
className={`flex items-center justify-between ${priceDirection}`}
>
{/* price */}
<div className="mt-2">
<div
className={`${
priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
}`}
>
<span className="text-xs text-borderColor ml-2">قیمت</span>
{discountPrice && (
<p className="line-through text-xs text-borderColor mr-2">
145<span>تومان</span>
</p>
)}
</div>
<p className="product-price-num inline">
145.000<span>تومان</span>
</p>
</div>
{/* add to cart */}
<button
className={`addToCart ${
priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`}
>
اضافه کردن به سبد خرید
</button>
</div>
{/* tag holder */}
{productTags && (
<div className="mt-2 flex flex-wrap">
<button className="product-tag">ارسال رایگان</button>
<button className="product-tag">برچسب های دیگر</button>
<button className="product-tag">دسته بندی به صورت کادو</button>
</div>
)}
</div>
</div>
{/* product items3 */}
<div className="product-items-holder">
{/* item1 */}
<div className="product-item">
{/*star img holder*/}
<div className="w-full relative">
{discountPricePercent && (
<div className="discountPriceBtn">
<p className="dicountPriceNum">
23<span>%</span>
</p>
</div>
)}
{likeBtn && (
<div className="likeBtnBg">
<img src={heart} alt="" className="w-full" />
</div>
)}
{discount && (
<div className="discountBtn">
<img src={discountImg} alt="" className="w-full" />
</div>
)}
{/* img Holder */}
<div className="flex-shrink-0">
<img src={book} alt="" className="w-full rounded-lg" />
</div>
{/* select Color */}
{colors && (
<div className="absolute right-2 bottom-2">
<ul className="flex ">
<li className="ml-1 text-selectColor1">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor2">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor3">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor4">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
</ul>
</div>
)}
</div>
{/* content holder */}
<div className="mt-4">
<h2 className={`productTitle ${productTitleAlignment}`}>
نسخه چاپی علموم تجربه هفتم
</h2>
{productContent && (
<p className="productContent">
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
دیگری نیز دارد.
</p>
)}
</div>
{/* star holder */}
{star && (
<div className="flex items-center mt-2">
<StarRating />
<span className="text-xs text-productContent font-bold mr-2">
39
</span>
</div>
)}
{/* price holder */}
<div
className={`flex items-center justify-between ${priceDirection}`}
>
{/* price */}
<div className="mt-2">
<div
className={`${
priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
}`}
>
<span className="text-xs text-borderColor ml-2">قیمت</span>
{discountPrice && (
<p className="line-through text-xs text-borderColor mr-2">
145<span>تومان</span>
</p>
)}
</div>
<p className="product-price-num inline">
145.000<span>تومان</span>
</p>
</div>
{/* add to cart */}
<button
className={`addToCart ${
priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`}
>
اضافه کردن به سبد خرید
</button>
</div>
{/* tag holder */}
{productTags && (
<div className="mt-2 flex flex-wrap">
<button className="product-tag">ارسال رایگان</button>
<button className="product-tag">برچسب های دیگر</button>
<button className="product-tag">دسته بندی به صورت کادو</button>
</div>
)}
</div>
</div>
{/* product items4 */}
<div className="product-items-holder">
{/* item1 */}
<div className="product-item">
{/*star img holder*/}
<div className="w-full relative">
{discountPricePercent && (
<div className="discountPriceBtn">
<p className="dicountPriceNum">
23<span>%</span>
</p>
</div>
)}
{likeBtn && (
<div className="likeBtnBg">
<img src={heart} alt="" className="w-full" />
</div>
)}
{discount && (
<div className="discountBtn">
<img src={discountImg} alt="" className="w-full" />
</div>
)}
{/* img Holder */}
<div className="flex-shrink-0">
<img src={book} alt="" className="w-full rounded-lg" />
</div>
{/* select Color */}
{colors && (
<div className="absolute right-2 bottom-2">
<ul className="flex ">
<li className="ml-1 text-selectColor1">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor2">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor3">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor4">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
</ul>
</div>
)}
</div>
{/* content holder */}
<div className="mt-4">
<h2 className={`productTitle ${productTitleAlignment}`}>
نسخه چاپی علموم تجربه هفتم
</h2>
{productContent && (
<p className="productContent">
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
دیگری نیز دارد.
</p>
)}
</div>
{/* star holder */}
{star && (
<div className="flex items-center mt-2">
<StarRating />
<span className="text-xs text-productContent font-bold mr-2">
39
</span>
</div>
)}
{/* price holder */}
<div
className={`flex items-center justify-between ${priceDirection}`}
>
{/* price */}
<div className="mt-2">
<div
className={`${
priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
}`}
>
<span className="text-xs text-borderColor ml-2">قیمت</span>
{discountPrice && (
<p className="line-through text-xs text-borderColor mr-2">
145<span>تومان</span>
</p>
)}
</div>
<p className="product-price-num inline">
145.000<span>تومان</span>
</p>
</div>
{/* add to cart */}
<button
className={`addToCart ${
priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`}
>
اضافه کردن به سبد خرید
</button>
</div>
{/* tag holder */}
{productTags && (
<div className="mt-2 flex flex-wrap">
<button className="product-tag">ارسال رایگان</button>
<button className="product-tag">برچسب های دیگر</button>
<button className="product-tag">دسته بندی به صورت کادو</button>
</div>
)}
</div>
</div>
{/* product items5 */}
<div className="product-items-holder">
{/* item1 */}
<div className="product-item">
{/*star img holder*/}
<div className="w-full relative">
{discountPricePercent && (
<div className="discountPriceBtn">
<p className="dicountPriceNum">
23<span>%</span>
</p>
</div>
)}
{likeBtn && (
<div className="likeBtnBg">
<img src={heart} alt="" className="w-full" />
</div>
)}
{discount && (
<div className="discountBtn">
<img src={discountImg} alt="" className="w-full" />
</div>
)}
{/* img Holder */}
<div className="flex-shrink-0">
<img src={book} alt="" className="w-full rounded-lg" />
</div>
{/* select Color */}
{colors && (
<div className="absolute right-2 bottom-2">
<ul className="flex ">
<li className="ml-1 text-selectColor1">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor2">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor3">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor4">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
</ul>
</div>
)}
</div>
{/* content holder */}
<div className="mt-4">
<h2 className={`productTitle ${productTitleAlignment}`}>
نسخه چاپی علموم تجربه هفتم
</h2>
{productContent && (
<p className="productContent">
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
دیگری نیز دارد.
</p>
)}
</div>
{/* star holder */}
{star && (
<div className="flex items-center mt-2">
<StarRating />
<span className="text-xs text-productContent font-bold mr-2">
39
</span>
</div>
)}
{/* price holder */}
<div
className={`flex items-center justify-between ${priceDirection}`}
>
{/* price */}
<div className="mt-2">
<div
className={`${
priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
}`}
>
<span className="text-xs text-borderColor ml-2">قیمت</span>
{discountPrice && (
<p className="line-through text-xs text-borderColor mr-2">
145<span>تومان</span>
</p>
)}
</div>
<p className="product-price-num inline">
145.000<span>تومان</span>
</p>
</div>
{/* add to cart */}
<button
className={`addToCart ${
priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`}
>
اضافه کردن به سبد خرید
</button>
</div>
{/* tag holder */}
{productTags && (
<div className="mt-2 flex flex-wrap">
<button className="product-tag">ارسال رایگان</button>
<button className="product-tag">برچسب های دیگر</button>
<button className="product-tag">دسته بندی به صورت کادو</button>
</div>
)}
</div>
</div>
</div> </div>
</section> </section>
); );

Write Preview
Loading…
Cancel
Save