slide added

src/App.js

@@ -53,7 +53,7 @@ function App() {
   return (
     <Provider store={store}>
       <div className="App">
-        <ProductDesign />
+        {/* <ProductDesign /> */}
         {/* <VodProductDesign /> */}
         {/* <VodProduct /> */}
         {/* <VodProductNew /> */}

src/components/Digikala/Offer.js

@@ -1,4 +1,5 @@
 import React from "react";
+import "./index";
 
 import leftArrow from "./white-left-arrow.svg";
 import General from "./General.png";
@@ -17,7 +18,7 @@ const Offer = ({ products }) => {
     >
       <div className="flex flex-row items-center p-2">
         {/* right */}
-        <div className="flex flex-col items-center justify-between bg-blue-400  w-2/12">
+        <div className="flex flex-col items-center justify-between w-2/12">
           <span className="text-base text-center text-white font-bold leading-8">
             پیـــــشنهاد
             <br />
@@ -32,9 +33,39 @@ const Offer = ({ products }) => {
           </button>
         </div>
         {/* left */}
-        <div className="flex-1 w-10/12 flex flex-row items-center rounded-lg bg-white">
+        {/* no-scrollbar */}
+        <div
+          className="tabbar overflow-x-scroll scrolling-touch w-10/12 flex flex-row items-center rounded-lg bg-white"
+          onMouseDown={(e) => {
+            const slider = window.document.querySelector(".tabbar");
+            window.isDown = true;
+            window.startX = e.pageX - slider.offsetLeft;
+            window.scrollLeft = slider.scrollLeft;
+          }}
+          onMouseLeave={(e) => {
+            window.isDown = false;
+          }}
+          onMouseUp={(e) => {
+            window.isDown = false;
+          }}
+          onMouseMove={(e) => {
+            const slider = window.document.querySelector(".tabbar");
+            if (!window.isDown) return;
+            e.preventDefault();
+            const x = e.pageX - slider.offsetLeft;
+            const walk = (x - window.startX) * 1;
+            slider.scrollLeft = window.scrollLeft - walk;
+          }}
+        >
           {products.map((product, index) => (
-            <div className="flex flex-col p-2">
+            <div
+              className="flex flex-col p-2"
+              aria-current="page"
+              onClick={(e) => {
+                if (window.isDown) return e.preventDefault();
+                ///do here
+              }}
+            >
               <img src={product.image} className="rounded w-40" />
               <div className="flex flex-row justify-between items-center mt-4">
                 {/* right */}
@@ -55,8 +86,17 @@ const Offer = ({ products }) => {
                 className="text-left text-xs line-through my-2 ml-3"
                 style={{ color: "#c0c2c5" }}
               >
-                559000
+                {product.discountPrice}
               </p>
+              <div className="bg-gray-200 h-1.5 mx-auto rounded mt-2 flex flex-row-reverse w-10/12">
+                <div
+                  className={`h-1.5 rounded duration-500`}
+                  style={{
+                    width: product.rangeWidth,
+                    backgroundColor: "#ef3a4f",
+                  }}
+                ></div>
+              </div>
             </div>
           ))}
         </div>
@@ -69,9 +109,117 @@ export default Offer;
 
 Offer.defaultProps = {
   products: [
-    { image: o2, price: 20900000, discount: 7, rangeWidht: 33 },
-    { image: o3, price: 11000000, discount: 2, rangeWidht: 75 },
-    { image: r1, price: 3205000, discount: 70, rangeWidht: 72 },
-    { image: r2, price: 30000, discount: 75, rangeWidht: 96 },
+    {
+      image: o2,
+      price: 20900000,
+      discount: 7,
+      rangeWidth: "33%",
+      discountPrice: 75000,
+    },
+    {
+      image: o3,
+      price: 11000000,
+      discount: 2,
+      rangeWidth: "75%",
+      discountPrice: 75000,
+    },
+    {
+      image: r1,
+      price: 3205000,
+      discount: 70,
+      rangeWidth: "72%",
+      discountPrice: 75000,
+    },
+    {
+      image: r2,
+      price: 30000,
+      discount: 75,
+      rangeWidth: "44%",
+      discountPrice: 75000,
+    },
+    {
+      image: o2,
+      price: 20900000,
+      discount: 7,
+      rangeWidth: "33%",
+      discountPrice: 75000,
+    },
+    {
+      image: o3,
+      price: 11000000,
+      discount: 2,
+      rangeWidth: "75%",
+      discountPrice: 75000,
+    },
+    {
+      image: r1,
+      price: 3205000,
+      discount: 70,
+      rangeWidth: "72%",
+      discountPrice: 75000,
+    },
+    {
+      image: r2,
+      price: 30000,
+      discount: 75,
+      rangeWidth: "44%",
+      discountPrice: 75000,
+    },
+    {
+      image: o2,
+      price: 20900000,
+      discount: 7,
+      rangeWidth: "33%",
+      discountPrice: 75000,
+    },
+    {
+      image: o3,
+      price: 11000000,
+      discount: 2,
+      rangeWidth: "75%",
+      discountPrice: 75000,
+    },
+    {
+      image: r1,
+      price: 3205000,
+      discount: 70,
+      rangeWidth: "72%",
+      discountPrice: 75000,
+    },
+    {
+      image: r2,
+      price: 30000,
+      discount: 75,
+      rangeWidth: "44%",
+      discountPrice: 75000,
+    },
+    {
+      image: o2,
+      price: 20900000,
+      discount: 7,
+      rangeWidth: "33%",
+      discountPrice: 75000,
+    },
+    {
+      image: o3,
+      price: 11000000,
+      discount: 2,
+      rangeWidth: "75%",
+      discountPrice: 75000,
+    },
+    {
+      image: r1,
+      price: 3205000,
+      discount: 70,
+      rangeWidth: "72%",
+      discountPrice: 75000,
+    },
+    {
+      image: r2,
+      price: 30000,
+      discount: 75,
+      rangeWidth: "44%",
+      discountPrice: 75000,
+    },
   ],
 };

src/components/Digikala/index.scss

@@ -0,0 +1,11 @@
+.no-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+.tabbar {
+  cursor: pointer;
+}
+.active2,
+.active2 li a {
+  cursor: move !important;
+}

src/components/ReactTable4/index.js

@@ -42,7 +42,7 @@ const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
           <h2 className="text-sm">{subTitle}</h2>
         </div>
       </div>
-      {/* <Tabbar /> */}
+      <Tabbar />
       <BasicTable />
     </div>
   );