70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
"use client";
|
|
import Image, { type StaticImageData } from "next/image";
|
|
import Link from "next/link";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import { Autoplay, Navigation, Pagination } from "swiper/modules";
|
|
|
|
import "swiper/css";
|
|
import "swiper/css/navigation";
|
|
import "swiper/css/pagination";
|
|
|
|
type CarouselItem = {
|
|
title: string;
|
|
image: StaticImageData | string;
|
|
url?: string | null;
|
|
};
|
|
|
|
export default function HeroCarousel({ items }: { items: CarouselItem[] }) {
|
|
return (
|
|
<section className="rounded-2xl overflow-hidden relative">
|
|
<Swiper
|
|
modules={[Autoplay, Navigation, Pagination]}
|
|
slidesPerView={1}
|
|
loop
|
|
navigation
|
|
autoplay={{ delay: 3000, disableOnInteraction: false }}
|
|
pagination={{ clickable: true }}
|
|
className="
|
|
[&_.swiper-button-next]:text-white!
|
|
[&_.swiper-button-prev]:text-white!
|
|
[&_.swiper-button-next]:hidden!
|
|
[&_.swiper-button-prev]:hidden!
|
|
md:[&_.swiper-button-next]:flex!
|
|
md:[&_.swiper-button-prev]:flex!
|
|
[&_.swiper-pagination-bullet]:bg-white!
|
|
[&_.swiper-pagination-bullet-active]:bg-white!
|
|
"
|
|
>
|
|
{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>
|
|
);
|
|
}
|