68 lines
2.3 KiB
TypeScript
68 lines
2.3 KiB
TypeScript
import React from "react";
|
|
import { useState } from "react";
|
|
import { BsChevronCompactLeft, BsChevronCompactRight } from "react-icons/bs";
|
|
import { RxDotFilled } from "react-icons/rx";
|
|
import { EmblaCarousel } from "./carousel";
|
|
|
|
const Gallery = () => {
|
|
// const slides = [
|
|
// { url: "/images/1577mobile.webp" },
|
|
// { url: "/images/bar01.jpg" },
|
|
// { url: "/images/fbimg02.jpg" },
|
|
// { url: "/images/food01.jpg" },
|
|
// { url: "/images/food02.webp" },
|
|
// { url: "/images/IMG_2737.webp" },
|
|
// { url: "/images/IMG_2749.webp" },
|
|
// { url: "/images/IMG_2766.webp" },
|
|
// { url: "/images/img01.webp" },
|
|
// { url: "/images/img05.webp" },
|
|
// ];
|
|
|
|
// const [currentIndex, setCurrentIndex] = useState(0);
|
|
|
|
// const prevSlide = () => {
|
|
// const isFirstSlide = currentIndex === 0;
|
|
// const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1;
|
|
// setCurrentIndex(newIndex);
|
|
// };
|
|
|
|
// const nextSlide = () => {
|
|
// const isLastSlide = currentIndex === slides.length - 1;
|
|
// const newIndex = isLastSlide ? 0 : currentIndex + 1;
|
|
// setCurrentIndex(newIndex);
|
|
// };
|
|
|
|
// const goToSlide = (slideIndex) => {
|
|
// setCurrentIndex(slideIndex);
|
|
// };
|
|
|
|
return (
|
|
<div className="">
|
|
<EmblaCarousel />
|
|
{/* <div
|
|
style={{ backgroundImage: `url(${slides[5].url})` }}
|
|
className="w-full h-full rounded-2xl bg-center bg-cover duration-500"
|
|
></div>
|
|
<div className="hidden group-hover:block absolute top-50% -translate-x-0 translate-y-[-50%] left-5 text-2xl rounded-full p-2 bg-black/20 text-base-100 cursor-pointer">
|
|
<BsChevronCompactLeft onClick={prevSlide} size={30} />
|
|
</div>
|
|
<div className="hidden group-hover:block absolute top-50% -translate-x-0 translate-y-[-50%] right-5 text-2xl rounded-full p-2 bg-black/20 text-base-100 cursor-pointer">
|
|
<BsChevronCompactRight onClikc={nextSlide} size={30} />
|
|
</div>
|
|
<div className="flex top-4 justify-center py-2">
|
|
{slides.map((slide, slideIndex) => (
|
|
<div
|
|
key={slideIndex}
|
|
onClick={() => goToSlide(slideIndex)}
|
|
className="text-2xl cursor-pointer"
|
|
>
|
|
<RxDotFilled />
|
|
</div>
|
|
))}
|
|
</div> */}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Gallery;
|