65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { motion } from 'motion/react';
|
|
import { clsx } from 'clsx';
|
|
|
|
type ImageCardCarouselProps = {
|
|
images: string[];
|
|
interval?: number; // in milliseconds
|
|
className?: string;
|
|
};
|
|
|
|
const ImageCardCarousel = ({ images, interval = 3000, className }: ImageCardCarouselProps) => {
|
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
const [progress, setProgress] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const imageTimer = setInterval(() => {
|
|
setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
|
|
setProgress(0); // Reset progress for the new image
|
|
}, interval);
|
|
|
|
return () => clearInterval(imageTimer);
|
|
}, [images, interval]);
|
|
|
|
useEffect(() => {
|
|
const progressTimer = setInterval(() => {
|
|
setProgress((prevProgress) => {
|
|
const newProgress = prevProgress + (1000 / interval) * 100; // Increment by 100ms worth of progress
|
|
return newProgress >= 100 ? 100 : newProgress;
|
|
});
|
|
}, 100); // Update progress every 100ms
|
|
|
|
return () => clearInterval(progressTimer);
|
|
}, [interval]);
|
|
|
|
if (!images || images.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className={clsx("relative w-full h-full rounded-lg overflow-hidden", className)}>
|
|
{images.map((image, index) => (
|
|
<motion.img
|
|
key={image}
|
|
src={image}
|
|
alt={`Slide ${index + 1}`}
|
|
className="absolute inset-0 w-full h-full object-cover"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: index === currentIndex ? 1 : 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
/>
|
|
))}
|
|
<div className="absolute bottom-0 left-0 w-full h-1 bg-white/30">
|
|
<motion.div
|
|
className="h-full bg-primary-cta"
|
|
initial={{ width: 0 }}
|
|
animate={{ width: `${progress}%` }}
|
|
transition={{ duration: 0.1, ease: "linear" }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ImageCardCarousel;
|