parent
fe4397114a
commit
e219fc859a
43 changed files with 849 additions and 85 deletions
@ -0,0 +1,6 @@ |
|||||||
|
module.exports = { |
||||||
|
plugins: { |
||||||
|
tailwindcss: {}, |
||||||
|
autoprefixer: {}, |
||||||
|
}, |
||||||
|
} |
||||||
@ -1,38 +0,0 @@ |
|||||||
.App { |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
.App-logo { |
|
||||||
height: 40vmin; |
|
||||||
pointer-events: none; |
|
||||||
} |
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) { |
|
||||||
.App-logo { |
|
||||||
animation: App-logo-spin infinite 20s linear; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.App-header { |
|
||||||
background-color: #282c34; |
|
||||||
min-height: 100vh; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
font-size: calc(10px + 2vmin); |
|
||||||
color: white; |
|
||||||
} |
|
||||||
|
|
||||||
.App-link { |
|
||||||
color: #61dafb; |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes App-logo-spin { |
|
||||||
from { |
|
||||||
transform: rotate(0deg); |
|
||||||
} |
|
||||||
to { |
|
||||||
transform: rotate(360deg); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,8 +0,0 @@ |
|||||||
import { render, screen } from '@testing-library/react'; |
|
||||||
import App from './App'; |
|
||||||
|
|
||||||
test('renders learn react link', () => { |
|
||||||
render(<App />); |
|
||||||
const linkElement = screen.getByText(/learn react/i); |
|
||||||
expect(linkElement).toBeInTheDocument(); |
|
||||||
}); |
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 868 B |
|
After Width: | Height: | Size: 675 B |
|
After Width: | Height: | Size: 207 B |
|
After Width: | Height: | Size: 86 KiB |
|
After Width: | Height: | Size: 62 KiB |
@ -0,0 +1,673 @@ |
|||||||
|
import React from "react"; |
||||||
|
import "./ProductDesign.scss"; |
||||||
|
import book from "../../assets/images/goldon.png"; |
||||||
|
import heart from "../../assets/icons/vuesax-linear-heart.svg"; |
||||||
|
import discountImg from "../../assets/icons/discount.png"; |
||||||
|
// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
|
||||||
|
const ProductDesign = ({ |
||||||
|
colors, |
||||||
|
likeBtn, |
||||||
|
discount, |
||||||
|
discountPricePercent, |
||||||
|
discountPrice, |
||||||
|
productContent, |
||||||
|
star, |
||||||
|
productTags, |
||||||
|
priceDirection, |
||||||
|
productTitleAlignment, |
||||||
|
}) => { |
||||||
|
return ( |
||||||
|
<section className="w-11/12 mx-auto 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 className="flex justify-around"> |
||||||
|
{/* product items1 */} |
||||||
|
<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"> |
||||||
|
<ul className="flex"> |
||||||
|
<li className="ml-1 text-productStar"> |
||||||
|
{/* <FontAwesomeIcon icon="check-square" /> */} |
||||||
|
</li> |
||||||
|
<li className="ml-1 text-productStar"> |
||||||
|
{/* <FontAwesomeIcon icon="check-square" /> */} |
||||||
|
</li> |
||||||
|
<li className="ml-1 text-productStar"> |
||||||
|
{/* <FontAwesomeIcon icon="check-square" /> */} |
||||||
|
</li> |
||||||
|
<li className="ml-1 text-productStar"> |
||||||
|
{/* <FontAwesomeIcon icon="check-square" /> */} |
||||||
|
</li> |
||||||
|
<li className="ml-1 text-productStar"> |
||||||
|
{/* <FontAwesomeIcon icon="check-square" /> */} |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<span className="text-xs text-productContent font-bold"> |
||||||
|
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 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"> |
||||||
|
<ul className="flex"> |
||||||
|
<li className="ml-1 text-productStar"> |
||||||
|
{/* <FontAwesomeIcon icon="check-square" /> */} |
||||||
|
</li> |
||||||
|
<li className="ml-1 text-productStar"> |
||||||
|
{/* <FontAwesomeIcon icon="check-square" /> */} |
||||||
|
</li> |
||||||
|
<li className="ml-1 text-productStar"> |
||||||
|
{/* <FontAwesomeIcon icon="check-square" /> */} |
||||||
|
</li> |
||||||
|
<li className="ml-1 text-productStar"> |
||||||
|
{/* <FontAwesomeIcon icon="check-square" /> */} |
||||||
|
</li> |
||||||
|
<li className="ml-1 text-productStar"> |
||||||
|
{/* <FontAwesomeIcon icon="check-square" /> */} |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<span className="text-xs text-productContent font-bold"> |
||||||
|
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"> |
||||||
|
<ul className="flex"> |
||||||
|
<li className="ml-1 text-productStar"> |
||||||
|
{/* <FontAwesomeIcon icon="check-square" /> */} |
||||||
|
</li> |
||||||
|
<li className="ml-1 text-productStar"> |
||||||
|
{/* <FontAwesomeIcon icon="check-square" /> */} |
||||||
|
</li> |
||||||
|
<li className="ml-1 text-productStar"> |
||||||
|
{/* <FontAwesomeIcon icon="check-square" /> */} |
||||||
|
</li> |
||||||
|
<li className="ml-1 text-productStar"> |
||||||
|
{/* <FontAwesomeIcon icon="check-square" /> */} |
||||||
|
</li> |
||||||
|
<li className="ml-1 text-productStar"> |
||||||
|
{/* <FontAwesomeIcon icon="check-square" /> */} |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<span className="text-xs text-productContent font-bold"> |
||||||
|
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"> |
||||||
|
<ul className="flex"> |
||||||
|
<li className="ml-1 text-productStar"> |
||||||
|
{/* <FontAwesomeIcon icon="check-square" /> */} |
||||||
|
</li> |
||||||
|
<li className="ml-1 text-productStar"> |
||||||
|
{/* <FontAwesomeIcon icon="check-square" /> */} |
||||||
|
</li> |
||||||
|
<li className="ml-1 text-productStar"> |
||||||
|
{/* <FontAwesomeIcon icon="check-square" /> */} |
||||||
|
</li> |
||||||
|
<li className="ml-1 text-productStar"> |
||||||
|
{/* <FontAwesomeIcon icon="check-square" /> */} |
||||||
|
</li> |
||||||
|
<li className="ml-1 text-productStar"> |
||||||
|
{/* <FontAwesomeIcon icon="check-square" /> */} |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<span className="text-xs text-productContent font-bold"> |
||||||
|
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"> |
||||||
|
<ul className="flex"> |
||||||
|
<li className="ml-1 text-productStar"> |
||||||
|
{/* <FontAwesomeIcon icon="check-square" /> */} |
||||||
|
</li> |
||||||
|
<li className="ml-1 text-productStar"> |
||||||
|
{/* <FontAwesomeIcon icon="check-square" /> */} |
||||||
|
</li> |
||||||
|
<li className="ml-1 text-productStar"> |
||||||
|
{/* <FontAwesomeIcon icon="check-square" /> */} |
||||||
|
</li> |
||||||
|
<li className="ml-1 text-productStar"> |
||||||
|
{/* <FontAwesomeIcon icon="check-square" /> */} |
||||||
|
</li> |
||||||
|
<li className="ml-1 text-productStar"> |
||||||
|
{/* <FontAwesomeIcon icon="check-square" /> */} |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<span className="text-xs text-productContent font-bold"> |
||||||
|
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> |
||||||
|
</section> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default ProductDesign; |
||||||
|
|
||||||
|
ProductDesign.defaultProps = { |
||||||
|
colors: true, |
||||||
|
likeBtn: true, |
||||||
|
discount: true, |
||||||
|
discountPricePercent: true, |
||||||
|
discountPrice: true, |
||||||
|
productContent: true, |
||||||
|
star: true, |
||||||
|
productTags: true, |
||||||
|
priceDirection: "flex-row", |
||||||
|
productTitleAlignment: "text-justify", |
||||||
|
}; |
||||||
@ -0,0 +1,42 @@ |
|||||||
|
.product-items-holder { |
||||||
|
@apply w-full flex flex-wrap items-center justify-around my-10 px-4; |
||||||
|
} |
||||||
|
|
||||||
|
.product-item { |
||||||
|
@apply w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm border p-2 my-3; |
||||||
|
} |
||||||
|
|
||||||
|
.discountPriceBtn { |
||||||
|
@apply bg-discountPriceBg absolute left-2 top-4 rounded-md px-2 py-1; |
||||||
|
} |
||||||
|
|
||||||
|
.likeBtnBg { |
||||||
|
@apply bg-likeBtnBg absolute left-2 top-10 rounded-md p-1; |
||||||
|
} |
||||||
|
|
||||||
|
.discountBtn { |
||||||
|
@apply absolute left-2 top-20 rounded-md; |
||||||
|
} |
||||||
|
.dicountPriceNum { |
||||||
|
@apply text-discountPriceTitle font-bold text-xs; |
||||||
|
} |
||||||
|
|
||||||
|
.productTitle { |
||||||
|
@apply text-productTitle leading-4 text-base 2xl:text-lg; |
||||||
|
} |
||||||
|
|
||||||
|
.productContent { |
||||||
|
@apply text-justify text-productContent mt-2 text-sm leading-6; |
||||||
|
} |
||||||
|
|
||||||
|
.addToCart { |
||||||
|
@apply rounded-2xl px-2 py-3 border text-xs text-productPrice; |
||||||
|
} |
||||||
|
|
||||||
|
.product-price-num { |
||||||
|
@apply text-sm text-productPrice font-semibold; |
||||||
|
} |
||||||
|
|
||||||
|
.product-tag { |
||||||
|
@apply rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs; |
||||||
|
} |
||||||
@ -1,13 +0,0 @@ |
|||||||
body { |
|
||||||
margin: 0; |
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', |
|
||||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', |
|
||||||
sans-serif; |
|
||||||
-webkit-font-smoothing: antialiased; |
|
||||||
-moz-osx-font-smoothing: grayscale; |
|
||||||
} |
|
||||||
|
|
||||||
code { |
|
||||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', |
|
||||||
monospace; |
|
||||||
} |
|
||||||
@ -1,17 +1,14 @@ |
|||||||
import React from 'react'; |
import React from "react"; |
||||||
import ReactDOM from 'react-dom'; |
import ReactDOM from "react-dom"; |
||||||
import './index.css'; |
import "./index.scss"; |
||||||
import App from './App'; |
import App from "./App"; |
||||||
import reportWebVitals from './reportWebVitals'; |
import reportWebVitals from "./reportWebVitals"; |
||||||
|
|
||||||
ReactDOM.render( |
ReactDOM.render( |
||||||
<React.StrictMode> |
<React.StrictMode> |
||||||
<App /> |
<App /> |
||||||
</React.StrictMode>, |
</React.StrictMode>, |
||||||
document.getElementById('root') |
document.getElementById("root") |
||||||
); |
); |
||||||
|
|
||||||
// If you want to start measuring performance in your app, pass a function
|
|
||||||
// to log results (for example: reportWebVitals(console.log))
|
|
||||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
|
||||||
reportWebVitals(); |
reportWebVitals(); |
||||||
|
|||||||
@ -0,0 +1,16 @@ |
|||||||
|
@tailwind base; |
||||||
|
@tailwind components; |
||||||
|
@tailwind utilities; |
||||||
|
|
||||||
|
@import "./components/productDesign/ProductDesign.scss"; |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: "iransans-medium"; |
||||||
|
src: url(./assets/fonts/iransans/ttf/IRANSansWeb_Medium.ttf); |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
font-family: iransans-medium; |
||||||
|
direction: rtl; |
||||||
|
background-color: #f5f5f5; |
||||||
|
} |
||||||
|
Before Width: | Height: | Size: 2.6 KiB |
@ -0,0 +1,30 @@ |
|||||||
|
module.exports = { |
||||||
|
content: ["./src/**/*.{js,jsx,ts,tsx}"], |
||||||
|
theme: { |
||||||
|
extend: {}, |
||||||
|
textColor: (theme) => ({ |
||||||
|
...theme("colors"), |
||||||
|
discountPriceTitle: "#4ACA53", |
||||||
|
productTitle: "#246E8A", |
||||||
|
productContent: "#707070", |
||||||
|
productStar: "#F7FF00", |
||||||
|
productPrice: "#132F52", |
||||||
|
productBorderBtn: "FFF3F3", |
||||||
|
productTag: "#38A1B6", |
||||||
|
borderColor: "#dbdbdb", |
||||||
|
selectColor1: "#924EEB", |
||||||
|
selectColor2: "#89ECFF", |
||||||
|
selectColor3: "#FC5353", |
||||||
|
selectColor4: "#FCF653", |
||||||
|
}), |
||||||
|
backgroundColor: (theme) => ({ |
||||||
|
...theme("colors"), |
||||||
|
productTagBg: "#E1FAFF", |
||||||
|
likeBtnBg: "#FFF3F3", |
||||||
|
discountPriceBg: "#F0FFF1", |
||||||
|
counterBg: "#66B1EB", |
||||||
|
incrementDecrementBg: "#2E7AB5", |
||||||
|
}), |
||||||
|
}, |
||||||
|
plugins: [], |
||||||
|
}; |
||||||
Loading…
Reference in new issue