carousel

index.d.ts

@@ -51,6 +51,16 @@ interface LinkProps {
 }
 export function Link(props: LinkProps): JSX.Element;
 
+interface DataImage {
+  src: string;
+}
+interface Image {
+  images: Array<DataImage>;
+  isLogo: boolean;
+  delay?: number;
+}
+export function Carousel(props: Image): JSX.Element;
+
 interface SearchProps {}
 export function Search(props: SearchProps): JSX.Element;
 

index.js

@@ -12,3 +12,6 @@ export { default as Search } from "./src/components/core/Search";
 
 // Feature components
 export { default as Hero } from "./src/components/Hero";
+
+//Carousel components
+export { default as Carousel } from "./src/components/core/Carousel";

src/components/core/Carousel.tsx

 import React from "react";
 
 interface DataImage {
-  id: number
-  src: string
+  src: string;
 }
 
 interface Props {
-  images: Array<DataImage>
+  images: Array<DataImage>;
+  isLogo: boolean;
+  delay?: number;
 }
 
-// const Carousel:React.FC<Props> = ({images}) => {
-const Carousel = () => {
-
-
-  const dataImage = [
-    {
-      id: 1,
-      src: "https://placeimg.com/800/200/arch",
-    },
-    {
-      id: 2,
-      src: "https://placeimg.com/800/200/arch",
-    },
-    {
-      id: 3,
-      src: "https://placeimg.com/800/200/arch",
-    },
-    {
-      id: 4,
-      src: "https://placeimg.com/800/200/arch",
-    },
-  ];
-
-  const nbr_image: number = dataImage.length;
+const Carousel = (props: Props) => {
+  const { images, isLogo, delay } = props;
+  const [index, setIndex] = React.useState(1);
+
+  const nbr_image: number = images.length;
+
+  const updateIndex = (newIndex: number) => {
+    if (newIndex < 0) {
+      newIndex = nbr_image - 1;
+    } else if (newIndex >= nbr_image) {
+      newIndex = 0;
+    }
+
+    setIndex(newIndex);
+  };
+
+  console.log("index", index);
+
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      if (delay != 0) {
+        updateIndex(index + 1);
+      }
+    }, delay);
+
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  });
 
   return (
-    <div className="carousel w-full">
-      {
-        dataImage.map((item:any, key:any) => {
-            return (
-                <div id={item.id} className="carousel-item relative w-full" key={key}>
-                    <img src={item.src} className="w-full" />
-                    <div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
-                    <a href={(item.id == 1) ? `#${nbr_image}` : `#${item.id - 1}`} className="btn btn-circle">
-                        ❮
-                    </a>
-                    <a href={(item.id == nbr_image) ? `#1` : `#${item.id + 1}`} className="btn btn-circle">
-                        ❯
-                    </a>
-                    </div>
+    <div className="carousel w-full truncate">
+      <div
+        className="whitespace-nowrap w-full"
+        style={{
+          transform: `translateX(-${index * 100}%)`,
+          transition: "transform 0.3s",
+        }}
+      >
+        {images.map((item: any, key: any) => {
+          return (
+            <div
+              className={`carousel-item relative w-full inline-block`}
+              key={key}
+            >
+              {isLogo ? (
+                <div className="flex justify-center items-center w-full">
+                  <img src={item.src} className="w-56" />
                 </div>
-            )
-        })
-      }
+              ) : (
+                <img src={item.src} className="w-full" />
+              )}
+            </div>
+          );
+        })}
+      </div>
+        <div className={`absolute flex justify-between pl-5 pr-5 w-full ${isLogo ? "mt-4" : " mt-[11rem]" } `}>
+          <button
+            onClick={() => updateIndex(index - 1)}
+            className=" bg-[#5A5C68] rounded-3xl w-10 h-10 text-white"
+          >
+            ❮
+          </button>
+          <button
+            onClick={() => updateIndex(index + 1)}
+            className=" bg-[#5A5C68] rounded-3xl w-10 h-10 text-white"
+          >
+            ❯
+          </button>
+        </div>
     </div>
   );
 };