digikala project added

src/App.js

@@ -44,6 +44,7 @@ import TableDesign1 from "./components/Table/Design1";
 import ReactTable2 from "./components/ReactTable2";
 // import ReactTable3 from "./components/ReactTable3";
 import ReactTable4 from "./components/ReactTable4";
+import Digikala from "./components/Digikala/ImageSlider";
 
 import Switch from "./components/Switch";
 
@@ -91,7 +92,8 @@ function App() {
         {/* <TableDesign1 /> */}
         {/* <ReactTable2 /> */}
         {/* <ReactTable3 /> */}
-        <ReactTable4 />
+        {/* <ReactTable4 /> */}
+        <Digikala />
       </div>
     </Provider>
   );

src/components/Digikala/ImageSlider.js

@@ -0,0 +1,76 @@
+import React, { useState } from "react";
+
+import rightArrow from "./black-right-arrow.svg";
+import leftArrow from "./black-left-arrow.svg";
+
+const ImageSlider = ({ slides }) => {
+  const [current, setCurrent] = useState(0);
+  const length = slides.length;
+
+  const nextSlide = () => {
+    setCurrent(current === length - 1 ? 0 : current + 1);
+  };
+
+  const prevSlide = () => {
+    setCurrent(current === 0 ? length - 1 : current - 1);
+  };
+
+  console.log(current);
+
+  if (!Array.isArray(slides) || slides.length <= 0) {
+    return null;
+  }
+
+  return (
+    <section className="bg-red-100">
+      <div className="group relative bg-pink-400">
+        {slides.map((slide, index) => {
+          return (
+            <div
+              className={index === current ? "slide active" : "slide"}
+              key={index}
+            >
+              {index === current && (
+                <img
+                  src={slide.image}
+                  alt="mahdi"
+                  className="w-full"
+                  style={{ height: "100%" }}
+                />
+              )}
+            </div>
+          );
+        })}
+        <Tabbar nextSlide={nextSlide} prevSlide={prevSlide} />
+      </div>
+    </section>
+  );
+};
+
+export default ImageSlider;
+
+function Tabbar({ nextSlide, prevSlide }) {
+  const tabs = [
+    {
+      icon: rightArrow,
+      click: nextSlide,
+    },
+    {
+      icon: leftArrow,
+      click: prevSlide,
+    },
+  ];
+  return (
+    <div className="flex flex-row items-center absolute bottom-7 right-10">
+      {tabs.map((tab, index) => (
+        <button
+          onClick={tab.click}
+          key={index}
+          className="bg-white border border-gray-300 rounded-full mx-1 p-2"
+        >
+          <img src={tab.icon} className="w-4" />
+        </button>
+      ))}
+    </div>
+  );
+}