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,7 +16,9 @@ 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
+          .sort((a, b) => (a.name > b.name ? 1 : -1))
+          .map((material, index) => (
             <li
               key={index}
               className="w-full py-3 px-3 font-medium text-md cursor-pointer h-12"
@@ -67,9 +72,9 @@ Sidebar.defaultProps = {
     {
       name: "Counters",
     },
-    {
+    // {
-      name: "Features",
+    //   name: "Features",
-    },
+    // },
     {
       name: "Calendar",
     },

src/components/AddToCart/index.js

@@ -1,10 +1,8 @@
 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,
@@ -15,8 +13,8 @@ const AddToCartCard = ({
   showProduct,
   productName,
   productImg,
-    productCat
+  productCat,
-}) =>{
+}) => {
   const specialities = [
     {
       icon: circleTick,
@@ -29,34 +27,42 @@ const AddToCartCard = ({
     {
       icon: shieldTick,
       description: `گارانتی اصالت و سلامت فیزیکی`,
-        }
+    },
   ];
-    return(
+  return (
     <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
+            src={productImg}
+            alt=""
+            style={{ maxWidth: "100px" }}
+            className=" bg-grayF4 py-2 px-4 bg-grayF4 rounded ml-4"
+          />
           <div className="text-sm">
             <h1 className="text-sm">{productName}</h1>
             <p className=" text-xs pt-2 text-blueC0">{productCat}</p>
           </div>
         </div>
-            }
+      )}
       {specialities.map((item, index) => (
         <div className="flex items-center  p-2 w-full border-0 border-b border-solid border-gray-300">
-                    {item.icon && <img src={item.icon} className="pl-3" />}
+          {item.icon && <img src={item.icon} alt="" className="pl-3" />}
           <p className="text-sm text-blue52 text-right">{item.description}</p>
         </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>}
+        </h1>
-            </div>
+        {profit && (
-            <div className="w-full flex justify-center">
+          <h5 className="text-xs p-2 pb-0 text-blue52">
-                {button}
+            با خرید این کالا {profit} تومان سود کنید
+          </h5>
+        )}
       </div>
+      <div className="w-full flex justify-center">{button}</div>
     </div>
   );
 };

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: [],
-}
+};