drfeely.com/components/HomePageCarousel.tsx

53 lines
1.5 KiB
TypeScript
Raw Normal View History

2023-08-25 19:06:28 +00:00
"use client";
2023-10-20 19:25:25 +00:00
import { default as Image } from "next-image-export-optimizer";
2023-09-11 20:34:00 +00:00
import chicagoPic from "@/public/content/chicago.jpg";
2023-10-20 19:25:25 +00:00
import indianapolisPic from "@/public/content/indianapolis.png";
2023-09-11 20:34:00 +00:00
import naturePic from "@/public/content/nature.jpg";
2023-08-25 19:06:28 +00:00
import { useEffect, useState } from "react";
import { useTransition, animated } from "@react-spring/web";
interface Props {
className?: string;
}
const Carousel = ({ className }: Props) => {
const [backgroundIndex, setBackgroundIndex] = useState(0);
const backgroundImages = [
{ image: chicagoPic, desc: "Chicago Skyline" },
{ image: indianapolisPic, desc: "Indianapolis Skyline" },
{ image: naturePic, desc: "Two women hiking in the mountains" },
];
useEffect(() => {
const interval = setInterval(() => {
setBackgroundIndex(
(prevIndex) => (prevIndex + 1) % backgroundImages.length,
2023-08-25 19:06:28 +00:00
);
2023-08-31 03:18:58 +00:00
}, 9000);
2023-08-25 19:06:28 +00:00
return () => clearInterval(interval);
}, []);
const transitions = useTransition(backgroundIndex, {
key: backgroundIndex,
from: { opacity: 0 },
2023-08-31 03:18:58 +00:00
enter: { opacity: 1 },
2023-08-25 19:06:28 +00:00
leave: { opacity: 0 },
config: { duration: 2500 },
exitBeforeEnter: true,
});
return transitions((style, item) => (
<animated.div style={style} className={className}>
<Image
src={backgroundImages[item].image}
alt={backgroundImages[item].desc}
className="h-full w-full object-cover"
/>
</animated.div>
));
};
export default Carousel;