55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
"use client";
|
|
import Image, { type StaticImageData } from "next/image";
|
|
import Link from "next/link";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import { Autoplay } from "swiper/modules";
|
|
import "swiper/css";
|
|
|
|
type CarouselItem = {
|
|
title: string;
|
|
image: StaticImageData | string;
|
|
url?: string | null;
|
|
};
|
|
|
|
export default function HeroCarousel({ items }: { items: CarouselItem[] }) {
|
|
return (
|
|
<section className="rounded-2xl overflow-hidden">
|
|
<Swiper
|
|
modules={[Autoplay]}
|
|
slidesPerView={1}
|
|
loop
|
|
autoplay={{ delay: 3000, disableOnInteraction: false }}
|
|
>
|
|
{items.map((item, i) => (
|
|
<SwiperSlide key={i}>
|
|
{item.url ? (
|
|
<Link
|
|
href={item.url}
|
|
className="block relative w-full h-[200px] sm:h-[300px] md:h-[496px]"
|
|
>
|
|
<Image
|
|
src={item.image}
|
|
alt={item.title}
|
|
fill
|
|
className="object-cover"
|
|
priority={i === 0}
|
|
/>
|
|
</Link>
|
|
) : (
|
|
<div className="relative w-full h-[200px] sm:h-[300px] md:h-[496px]">
|
|
<Image
|
|
src={item.image}
|
|
alt={item.title}
|
|
fill
|
|
className="object-cover"
|
|
priority={i === 0}
|
|
/>
|
|
</div>
|
|
)}
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</section>
|
|
);
|
|
}
|