53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import React from 'react'
|
|
import { type SwiperProps, type SwiperRef, SwiperSlide } from 'swiper/react'
|
|
import { cn } from '@/libs/cn'
|
|
import { isAboveBreakpoint } from '@/libs/breakpoint'
|
|
import { SimpleSwiper } from './SimpleSwiper'
|
|
|
|
export type MediaSwiperProps = SwiperProps & {
|
|
images: ImportAttributes[]
|
|
imageClassName?: string
|
|
slideClassName?: string
|
|
}
|
|
|
|
const isMd = isAboveBreakpoint('MD')
|
|
|
|
export const MediaSwiper = React.forwardRef<SwiperRef, MediaSwiperProps>(
|
|
({ images, className, slideClassName, imageClassName, ...otherProps }, ref) => {
|
|
return (
|
|
<SimpleSwiper
|
|
ref={ref}
|
|
slidesPerView={1}
|
|
freeMode={false}
|
|
mousewheel={false}
|
|
navigation={isMd}
|
|
pagination={{
|
|
type: 'fraction',
|
|
}}
|
|
loop={true}
|
|
watchSlidesProgress={true}
|
|
style={{ overflow: 'hidden' }}
|
|
className={cn('w-full rounded-3xl', className)}
|
|
{...otherProps}
|
|
>
|
|
{images.map((image, index) => (
|
|
<SwiperSlide key={index} className={slideClassName}>
|
|
<img
|
|
{...image}
|
|
loading={index === 0 ? 'eager' : 'lazy'}
|
|
decoding="async"
|
|
fetchPriority={index === 0 ? 'high' : 'auto'}
|
|
className={cn(
|
|
'aspect-video w-full rounded-3xl object-cover object-center',
|
|
imageClassName
|
|
)}
|
|
/>
|
|
<div className="swiper-lazy-preloader border-brand"></div>
|
|
</SwiperSlide>
|
|
))}
|
|
</SimpleSwiper>
|
|
)
|
|
}
|
|
)
|
|
MediaSwiper.displayName = 'SimpleSwiper'
|