task completed

master
mahdi 3 years ago
parent 82b1f59a5c
commit 2166d4b27d
  1. 8
      craco.config.js
  2. 36389
      package-lock.json
  3. 19
      package.json
  4. 27
      public/index.html
  5. BIN
      public/logo192.png
  6. BIN
      public/logo512.png
  7. 38
      src/App.css
  8. 28
      src/App.js
  9. 0
      src/App.scss
  10. 8
      src/App.test.js
  11. BIN
      src/assets/fonts/iransans/eot/IRANSansWeb.eot
  12. BIN
      src/assets/fonts/iransans/eot/IRANSansWeb_Black.eot
  13. BIN
      src/assets/fonts/iransans/eot/IRANSansWeb_Bold.eot
  14. BIN
      src/assets/fonts/iransans/eot/IRANSansWeb_Light.eot
  15. BIN
      src/assets/fonts/iransans/eot/IRANSansWeb_Medium.eot
  16. BIN
      src/assets/fonts/iransans/eot/IRANSansWeb_UltraLight.eot
  17. BIN
      src/assets/fonts/iransans/ttf/IRANSansWeb.ttf
  18. BIN
      src/assets/fonts/iransans/ttf/IRANSansWeb_Black.ttf
  19. BIN
      src/assets/fonts/iransans/ttf/IRANSansWeb_Bold.ttf
  20. BIN
      src/assets/fonts/iransans/ttf/IRANSansWeb_Light.ttf
  21. BIN
      src/assets/fonts/iransans/ttf/IRANSansWeb_Medium.ttf
  22. BIN
      src/assets/fonts/iransans/ttf/IRANSansWeb_UltraLight.ttf
  23. BIN
      src/assets/fonts/iransans/woff/IRANSansWeb.woff
  24. BIN
      src/assets/fonts/iransans/woff/IRANSansWeb_Black.woff
  25. BIN
      src/assets/fonts/iransans/woff/IRANSansWeb_Bold.woff
  26. BIN
      src/assets/fonts/iransans/woff/IRANSansWeb_Light.woff
  27. BIN
      src/assets/fonts/iransans/woff/IRANSansWeb_Medium.woff
  28. BIN
      src/assets/fonts/iransans/woff/IRANSansWeb_UltraLight.woff
  29. BIN
      src/assets/fonts/iransans/woff2/IRANSansWeb.woff2
  30. BIN
      src/assets/fonts/iransans/woff2/IRANSansWeb_Black.woff2
  31. BIN
      src/assets/fonts/iransans/woff2/IRANSansWeb_Bold.woff2
  32. BIN
      src/assets/fonts/iransans/woff2/IRANSansWeb_Light.woff2
  33. BIN
      src/assets/fonts/iransans/woff2/IRANSansWeb_Medium.woff2
  34. BIN
      src/assets/fonts/iransans/woff2/IRANSansWeb_UltraLight.woff2
  35. BIN
      src/assets/icons/discount.png
  36. 8
      src/assets/icons/vuesax-linear-heart.svg
  37. BIN
      src/assets/images/goldon.png
  38. 235
      src/components/productlist/ProductList.js
  39. 0
      src/components/productlist/ProductList.scss
  40. 58
      src/index..scss
  41. 13
      src/index.css
  42. 12
      src/index.js
  43. 1
      src/logo.svg
  44. 5
      src/setupTests.js
  45. 34
      tailwind.config.js
  46. 21079
      yarn.lock

@ -0,0 +1,8 @@
// craco.config.js
module.exports = {
style: {
postcss: {
plugins: [require("tailwindcss"), require("autoprefixer")],
},
},
};

36389
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -3,18 +3,25 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@craco/craco": "^6.4.2",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-regular-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.16",
"@testing-library/jest-dom": "^5.11.4", "@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0", "@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10", "@testing-library/user-event": "^12.1.10",
"node-sass": "^5.0.0",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"web-vitals": "^1.0.1" "web-vitals": "^1.0.1"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "craco start",
"build": "react-scripts build", "build": "craco build",
"test": "react-scripts test", "test": "craco test",
"eject": "react-scripts eject" "eject": "react-scripts eject"
}, },
"eslintConfig": { "eslintConfig": {
@ -34,5 +41,11 @@
"last 1 firefox version", "last 1 firefox version",
"last 1 safari version" "last 1 safari version"
] ]
},
"devDependencies": {
"autoprefixer": "^9.8.8",
"postcss": "^7.0.39",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
"tailwindcss-rtl": "^0.8.0"
} }
} }

@ -10,34 +10,13 @@
content="Web site created using create-react-app" content="Web site created using create-react-app"
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will <title>product list - task2</title>
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head> </head>
<body> <body dir="rtl">
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body> </body>
</html> </html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

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,23 +1,19 @@
import logo from './logo.svg'; import "./App.scss";
import './App.css'; import ProductList from "./components/productlist/ProductList";
import { library } from "@fortawesome/fontawesome-svg-core";
import { fab } from "@fortawesome/free-brands-svg-icons";
import {
faCheckSquare,
faCoffee,
faStar,
} from "@fortawesome/free-solid-svg-icons";
library.add(fab, faCheckSquare, faCoffee, faStar);
function App() { function App() {
return ( return (
<div className="App"> <div className="App">
<header className="App-header"> <ProductList />
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div> </div>
); );
} }

@ -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.

After

Width:  |  Height:  |  Size: 868 B

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="vuesax_linear_heart" data-name="vuesax/linear/heart" transform="translate(-236 -188)">
<g id="heart">
<path id="Vector" d="M10.62,17.71a2.181,2.181,0,0,1-1.24,0C6.48,16.72,0,12.59,0,5.59A5.574,5.574,0,0,1,5.56,0,5.515,5.515,0,0,1,10,2.24,5.547,5.547,0,0,1,20,5.59C20,12.59,13.52,16.72,10.62,17.71Z" transform="translate(238 191.1)" fill="none" stroke="#e11010" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(236 188)" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 675 B

Binary file not shown.

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;
}

@ -1,14 +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 // If you want to start measuring performance in your app, pass a function

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

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")],
};

21079
yarn.lock

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save