53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import Image from "next/image";
|
||
|
|
import chicagoPic from "@/public/homepage_carousel/chicago.jpg";
|
||
|
|
import indianapolisPic from "@/public/homepage_carousel/indianapolis.webp";
|
||
|
|
import naturePic from "@/public/homepage_carousel/nature.jpg";
|
||
|
|
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
|
||
|
|
);
|
||
|
|
}, 10000);
|
||
|
|
|
||
|
|
return () => clearInterval(interval);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const transitions = useTransition(backgroundIndex, {
|
||
|
|
key: backgroundIndex,
|
||
|
|
from: { opacity: 0 },
|
||
|
|
enter: { opacity: 0.25 },
|
||
|
|
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;
|