parent
82b1f59a5c
commit
2166d4b27d
46 changed files with 47875 additions and 10087 deletions
@ -0,0 +1,8 @@ |
||||
// craco.config.js
|
||||
module.exports = { |
||||
style: { |
||||
postcss: { |
||||
plugins: [require("tailwindcss"), require("autoprefixer")], |
||||
}, |
||||
}, |
||||
}; |
||||
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 9.4 KiB |
@ -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: 86 KiB |
@ -0,0 +1,235 @@ |
||||
import React from "react"; |
||||
import "./ProductList.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 ProductList = ({ |
||||
colors, |
||||
likeBtn, |
||||
discount, |
||||
discountPrice, |
||||
alignedProductTitle, |
||||
centeredProductTitle, |
||||
productContent, |
||||
alignedPriceHolder, |
||||
centeredPriceHolder, |
||||
centeredPriceHolder1, |
||||
centeredPriceHolder2, |
||||
centeredPriceHolder3, |
||||
star, |
||||
productTags, |
||||
}) => { |
||||
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="btn bg-indigo-500 text-white"> |
||||
مشاهده تمام محصولات |
||||
</button> |
||||
</div> |
||||
{/* product items1 */} |
||||
<div className="w-full flex flex-wrap justify-between my-10 px-4"> |
||||
{/* item1 */} |
||||
<div className="product-item" style={{ maxWidth: 250 }}> |
||||
{/*star img holder*/} |
||||
<div className="w-full relative"> |
||||
{/* like btn */} |
||||
{discountPrice && ( |
||||
<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"> |
||||
{alignedProductTitle && ( |
||||
<h2 className="productTitle"> نسخه چاپی علموم تجربه هفتم</h2> |
||||
)} |
||||
{centeredProductTitle && ( |
||||
<h2 className="productTitleCenter">نسخه چاپی علموم تجربه هفتم</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 */} |
||||
{alignedPriceHolder && ( |
||||
<div className="flex items-center justify-between mt-2"> |
||||
{/* price */} |
||||
<div> |
||||
<div className="flex"> |
||||
<span className="text-xs text-borderColor">قیمت</span> |
||||
{discountPrice && ( |
||||
<p className="line-through text-xs text-borderColor mr-2"> |
||||
145<span>تومان</span> |
||||
</p> |
||||
)} |
||||
</div> |
||||
<p className="product-price-num mt-1"> |
||||
145.000<span>تومان</span> |
||||
</p> |
||||
</div> |
||||
|
||||
{/* add to cart */} |
||||
<button className="addToCart text-borderColor"> |
||||
اضافه کردن به سبد خرید |
||||
</button> |
||||
</div> |
||||
)} |
||||
{centeredPriceHolder && ( |
||||
<div className="flex items-center justify-center mt-2"> |
||||
{/* price */} |
||||
<span className="text-xs text-borderColor ml-2">قیمت</span> |
||||
<p className="product-price-num"> |
||||
145.000<span>تومان</span> |
||||
</p> |
||||
</div> |
||||
)} |
||||
{centeredPriceHolder1 && ( |
||||
<div className="flex flex-col"> |
||||
{/* price */} |
||||
<div className="flex items-center justify-center mt-3"> |
||||
{/* price */} |
||||
<span className="text-xs text-borderColor ml-2">قیمت</span> |
||||
<p className="product-price-num"> |
||||
145.000<span>تومان</span> |
||||
</p> |
||||
</div> |
||||
<button className=" w-11/12 mt-3 mx-auto addToCart "> |
||||
اضافه کردن به سبد خرید |
||||
</button> |
||||
</div> |
||||
)} |
||||
{centeredPriceHolder2 && ( |
||||
<div className="flex flex-col"> |
||||
{/* price */} |
||||
<div className="flex items-center justify-center"> |
||||
{/* price */} |
||||
<span className="text-xs text-borderColor ml-2">قیمت</span> |
||||
<p className="product-price-num"> |
||||
145.000<span>تومان</span> |
||||
</p> |
||||
</div> |
||||
<h2 className="productTitle my-3">نسخه چاپی علموم تجربه هفتم</h2> |
||||
<button className=" w-11/12 mx-auto addToCart "> |
||||
اضافه کردن به سبد خرید |
||||
</button> |
||||
</div> |
||||
)} |
||||
{centeredPriceHolder3 && ( |
||||
<div className="flex flex-col"> |
||||
{/* price */} |
||||
<div className="flex items-center justify-center my-3"> |
||||
{/* price */} |
||||
<span className="text-xs text-borderColor ml-2">قیمت</span> |
||||
<p className="product-price-num"> |
||||
145.000<span>تومان</span> |
||||
</p> |
||||
</div> |
||||
<div className="bg-counterBg flex items-center justify-between mx-auto w-11/12 rounded p-2"> |
||||
<button className="text-white bg-incrementDecrementBg rounded-full p-1"> |
||||
<FontAwesomeIcon icon="check-square" /> |
||||
</button> |
||||
<p className="text-white">23</p> |
||||
<button className="text-white bg-incrementDecrementBg rounded-full p-1"> |
||||
<FontAwesomeIcon icon="check-square" /> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
)} |
||||
{/* tag holder */} |
||||
{productTags && ( |
||||
<div className="mt-4 flex flex-wrap"> |
||||
<button className="product-tag">ارسال رایگان</button> |
||||
<button className="product-tag">برچسب های دیگر</button> |
||||
<button className="product-tag">دسته بندی به صورت کادو</button> |
||||
</div> |
||||
)} |
||||
</div> |
||||
</div> |
||||
</section> |
||||
); |
||||
}; |
||||
|
||||
export default ProductList; |
||||
|
||||
ProductList.defaultProps = { |
||||
colors: true, |
||||
likeBtn: true, |
||||
discount: true, |
||||
discountPrice: false, |
||||
alignedProductTitle: true, |
||||
centeredProductTitle: false, |
||||
productContent: true, |
||||
alignedPriceHolder: true, |
||||
centeredPriceHolder: false, |
||||
centeredPriceHolder1: false, |
||||
centeredPriceHolder2: false, |
||||
centeredPriceHolder3: false, |
||||
star: true, |
||||
productTags: true, |
||||
}; |
||||
@ -0,0 +1,58 @@ |
||||
/* ./src/index.css */ |
||||
@tailwind base; |
||||
@tailwind components; |
||||
@tailwind utilities; |
||||
|
||||
@font-face { |
||||
font-family: "iransans-medium"; |
||||
src: url(./assets/fonts/iransans/ttf/IRANSansWeb_Medium.ttf); |
||||
} |
||||
|
||||
body { |
||||
font-family: iransans-medium; |
||||
background-color: #f5f5f5; |
||||
} |
||||
|
||||
.product-item { |
||||
@apply rounded-lg shadow-sm w-1/4 border p-2; |
||||
} |
||||
|
||||
.discountPriceBtn { |
||||
@apply bg-discountPriceBg absolute left-2 top-24 rounded-md px-2 py-1; |
||||
} |
||||
|
||||
.dicountPriceNum { |
||||
@apply text-discountPriceTitle font-bold text-xs; |
||||
} |
||||
|
||||
.likeBtnBg { |
||||
@apply bg-likeBtnBg absolute left-2 top-2 rounded-md p-1; |
||||
} |
||||
|
||||
.discountBtn { |
||||
@apply absolute left-2 top-12 rounded-md; |
||||
} |
||||
|
||||
.productTitle { |
||||
@apply text-justify text-productTitle leading-4 text-base 2xl:text-lg; |
||||
} |
||||
|
||||
.productTitleCenter { |
||||
@apply text-center 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; |
||||
} |
||||
|
Before Width: | Height: | Size: 2.6 KiB |
@ -1,5 +0,0 @@ |
||||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom'; |
||||
@ -0,0 +1,34 @@ |
||||
module.exports = { |
||||
purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"], |
||||
darkMode: false, // or 'media' or 'class'
|
||||
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", |
||||
}), |
||||
}, |
||||
variants: { |
||||
extend: {}, |
||||
}, |
||||
plugins: [require("tailwindcss-rtl")], |
||||
}; |
||||
Loading…
Reference in new issue