ok

src/components/Carousel.js

@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+import styles from "./Carousel.module.css"; // Import CSS module
+
+const Carousel = ({ items, onSelect }) => {
+  const [selectedIndex, setSelectedIndex] = useState(0); // Start at the first item
+
+  const moveToNext = () => {
+    console.log('aa')
+    if (selectedIndex < items.length - 1) {
+        console.log('bb')
+      setSelectedIndex(selectedIndex + 1);
+      onSelect(selectedIndex + 1); // Send the next index to the parent
+    }
+  };
+
+  const moveToPrev = () => {
+    if (selectedIndex > -1) {
+      setSelectedIndex(selectedIndex - 1);
+      onSelect(selectedIndex - 1); // Send the previous index to the parent
+    }
+  };
+
+  return (
+    <div className={styles.carouselContainer}>
+      <div className={styles.carousel}>
+        {/* Previous Item */}
+        <div
+          className={`${styles.carouselItem} ${styles.prev}`}
+          onClick={moveToPrev}
+          style={{ visibility: selectedIndex === -1 ? "hidden" : "visible" }}
+        >
+          {selectedIndex === -1 ? "+" : items[selectedIndex - 1]?.name || "+"}
+        </div>
+
+        {/* Current Item */}
+        <div className={`${styles.carouselItem} ${styles.center}`}>
+          {selectedIndex >= 0 ? items[selectedIndex]?.name : "+"}
+        </div>
+
+        {/* Next Item */}
+        <div
+          className={`${styles.carouselItem} ${styles.next}`}
+          onClick={moveToNext}
+          style={{
+            visibility: selectedIndex === items.length -1 ? "hidden" : "visible",
+          }}
+        >
+          {selectedIndex < items.length - 1 && items[selectedIndex + 1]?.name}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Carousel;