update 8 files

package.json

@@ -26,7 +26,7 @@
     "redux": "^4.1.2",
     "redux-devtools-extension": "^2.13.9",
     "redux-thunk": "^2.4.1",
-    "sass": "^1.43.4",
+    "sass": "^1.51.0",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

src/Views/Home/Sidebar/index.js

@@ -4,7 +4,10 @@ import { components } from "../../../redux/actions";
 
 function Sidebar({ list, setActive }) {
   return (
-    <div className="lg:flex lg:flex-col lg:w-1/6 lg:h-full" style={{ direction: 'ltr' }}>
+    <div
+      className="lg:flex lg:flex-col lg:w-1/6 lg:h-full"
+      style={{ direction: "ltr" }}
+    >
       <header className="w-full flex flex-row items-center h-16 px-1 py-4 bg-gray-700">
         <img
           src={"https://barnamenegar.ir/static/media/white logo 2.7ffbddbc.svg"}
@@ -13,15 +16,17 @@ function Sidebar({ list, setActive }) {
         />
       </header>
       <ul className="w-full flex-1 p-0 m-0 list-none divided divide-y max-h-full overflow-y-scroll divide-blue-100 border-r border-gray-200">
-        {list.sort((a, b) => (a.name > b.name) ? 1 : -1).map((material, index) => (
+        {list
-          <li
+          .sort((a, b) => (a.name > b.name ? 1 : -1))
-            key={index}
+          .map((material, index) => (
-            className="w-full py-3 px-3 font-medium text-md cursor-pointer h-12"
+            <li
-            onClick={() => setActive(material)}
+              key={index}
-          >
+              className="w-full py-3 px-3 font-medium text-md cursor-pointer h-12"
-            {material.name}
+              onClick={() => setActive(material)}
-          </li>
+            >
-        ))}
+              {material.name}
+            </li>
+          ))}
       </ul>
     </div>
   );
@@ -67,9 +72,9 @@ Sidebar.defaultProps = {
     {
       name: "Counters",
     },
-    {
+    // {
-      name: "Features",
+    //   name: "Features",
-    },
+    // },
     {
       name: "Calendar",
     },

src/components/AddToCart/index.js

@@ -1,64 +1,70 @@
 import React from "react";
 
-import circleTick from '../ProductStatusCard/tick-circle.svg';
+import circleTick from "../ProductStatusCard/tick-circle.svg";
-import shieldTick from '../ProductStatusCard/shield-tick.svg';
+import shieldTick from "../ProductStatusCard/shield-tick.svg";
-import linearGroup from '../ProductStatusCard/delivery-icon.svg';
+import linearGroup from "../ProductStatusCard/delivery-icon.svg";
-
-
 
 const AddToCartCard = ({
-    numberOfSuggest,
+  numberOfSuggest,
-    sendingTime,
+  sendingTime,
-    button,
+  button,
-    price,
+  price,
-    profit,
+  profit,
-    showProduct,
+  showProduct,
-    productName,
+  productName,
-    productImg,
+  productImg,
-    productCat
+  productCat,
-}) =>{
+}) => {
-    const specialities = [
+  const specialities = [
-        {
+    {
-            icon: circleTick,
+      icon: circleTick,
-            description: ` توصیه به خرید توسط ${numberOfSuggest} نفر`,
+      description: ` توصیه به خرید توسط ${numberOfSuggest} نفر`,
-        },
+    },
-        {
+    {
-            icon: linearGroup,
+      icon: linearGroup,
-            description: `زمان ارسال ${sendingTime} روز کاری پس از سفارش`,
+      description: `زمان ارسال ${sendingTime} روز کاری پس از سفارش`,
-        },
+    },
-        {
+    {
-            icon: shieldTick,
+      icon: shieldTick,
-            description: `گارانتی اصالت و سلامت فیزیکی`,
+      description: `گارانتی اصالت و سلامت فیزیکی`,
-        }
+    },
-    ];
+  ];
-    return(
+  return (
-        <div className="felx flex-col bg-grayF7 p-4 pt-0 w-full mx-4 items-center justify-center ">
+    <div className="felx flex-col bg-grayF7 p-4 pt-0 w-full mx-4 items-center justify-center ">
-            {
+      {showProduct && (
-                showProduct && <div className="flex w-full max-w-8 overflow-hidden items-center py-4  m-0 justify-center">
+        <div className="flex w-full max-w-8 overflow-hidden items-center py-4  m-0 justify-center">
-                        <img src={productImg} style={{maxWidth:'100px'}} className=" bg-grayF4 py-2 px-4 bg-grayF4 rounded ml-4" />
+          <img
-                        <div className="text-sm">  
+            src={productImg}
-                            <h1 className="text-sm">{productName}</h1>
+            alt=""
-                            <p className=" text-xs pt-2 text-blueC0">{productCat}</p>
+            style={{ maxWidth: "100px" }}
-                            </div>
+            className=" bg-grayF4 py-2 px-4 bg-grayF4 rounded ml-4"
-                    </div>
+          />
-            }
+          <div className="text-sm">
-            {specialities.map((item, index) => (
+            <h1 className="text-sm">{productName}</h1>
-                <div className="flex items-center  p-2 w-full border-0 border-b border-solid border-gray-300">
+            <p className=" text-xs pt-2 text-blueC0">{productCat}</p>
-                    {item.icon && <img src={item.icon} className="pl-3" />}
+          </div>
-                    <p className="text-sm text-blue52 text-right">{item.description}</p>
+        </div>
-                    </div>
+      )}
-            ))}
+      {specialities.map((item, index) => (
-            <div className="w-full flex flex-col items-center justify-center p-4">
+        <div className="flex items-center  p-2 w-full border-0 border-b border-solid border-gray-300">
-                <h1 className="text-xl text-gray-500">
+          {item.icon && <img src={item.icon} alt="" className="pl-3" />}
-                    <span className=" text-blueC0"> {price} </span> 
+          <p className="text-sm text-blue52 text-right">{item.description}</p>
-                      تومان </h1>
-                    { profit && <h5 className="text-xs p-2 pb-0 text-blue52">با خرید این کالا {profit} تومان سود کنید</h5>}
-            </div>
-            <div className="w-full flex justify-center">
-                {button}
-            </div>
         </div>
-    );
+      ))}
+      <div className="w-full flex flex-col items-center justify-center p-4">
+        <h1 className="text-xl text-gray-500">
+          <span className=" text-blueC0"> {price} </span>
+          تومان
+        </h1>
+        {profit && (
+          <h5 className="text-xs p-2 pb-0 text-blue52">
+            با خرید این کالا {profit} تومان سود کنید
+          </h5>
+        )}
+      </div>
+      <div className="w-full flex justify-center">{button}</div>
+    </div>
+  );
 };
 
 export default AddToCartCard;

src/index.css

@@ -1,16 +1,17 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    "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',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }

tailwind.config.js

@@ -1,11 +1,15 @@
 module.exports = {
-  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
+  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
-  darkMode: 'class', // or 'media' or 'class'
+  darkMode: "class", // or 'media' or 'class'
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        sansbold: ["sansbold"],
+      },
+    },
   },
   variants: {
     extend: {},
   },
   plugins: [],
-}
+};