53 lines
1.7 KiB
JavaScript
53 lines
1.7 KiB
JavaScript
import React, { useState } from "react";
|
|
import styles from "./Carousel.module.css"; // Import CSS module
|
|
|
|
const Carousel = ({ selectedIndex, items, onSelect }) => {
|
|
|
|
const moveToNext = () => {
|
|
console.log('aa')
|
|
if (selectedIndex < items.length - 1) {
|
|
console.log('bb')
|
|
onSelect(selectedIndex + 1); // Send the next index to the parent
|
|
}
|
|
};
|
|
|
|
const moveToPrev = () => {
|
|
if (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 && items.length > 0 ? "hidden" : "visible" , backgroundColor: items.length < 1 ? '#919191':'#007bff'}}
|
|
>
|
|
{selectedIndex === -1 ? (items.length > 0 ? "+" : "") : 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 && items.length > 0 ? "hidden" : "visible", backgroundColor: items.length < 1 ? '#919191':'#007bff'
|
|
}}
|
|
>
|
|
{selectedIndex < items.length - 1 && items[selectedIndex + 1]?.name}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Carousel;
|