hamid zarghami
102 lines
4.0 KiB
TypeScript
102 lines
4.0 KiB
TypeScript
'use client'
|
|
import { FC, useState, useEffect, useRef } from 'react'
|
|
import { Swiper, SwiperSlide, SwiperRef } from 'swiper/react';
|
|
import { Pagination } from 'swiper/modules';
|
|
import { ArrowLeft2, ArrowRight2 } from 'iconsax-react';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import { useGetLanding } from '../hooks/useHomeData';
|
|
|
|
const Carousel: FC = () => {
|
|
const { data } = useGetLanding()
|
|
const [isMobile, setIsMobile] = useState(false)
|
|
const swiperRef = useRef<SwiperRef>(null)
|
|
const [isBeginning, setIsBeginning] = useState(true)
|
|
const [isEnd, setIsEnd] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const checkIsMobile = () => {
|
|
setIsMobile(window.innerWidth < 768) // md breakpoint
|
|
}
|
|
|
|
checkIsMobile()
|
|
window.addEventListener('resize', checkIsMobile)
|
|
|
|
return () => window.removeEventListener('resize', checkIsMobile)
|
|
}, [])
|
|
|
|
// Choose appropriate sliders based on device type
|
|
const sliders = isMobile ? data?.results?.sliders?.mobile : data?.results?.sliders?.desktop
|
|
|
|
if (!sliders || sliders.length === 0) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className='relative' style={{ zIndex: 0 }}>
|
|
<Swiper
|
|
ref={swiperRef}
|
|
pagination={true}
|
|
modules={[Pagination]}
|
|
className="mySwiper pb-5"
|
|
style={{ zIndex: 0, position: 'relative' }}
|
|
onSlideChange={(swiper) => {
|
|
setIsBeginning(swiper.isBeginning)
|
|
setIsEnd(swiper.isEnd)
|
|
}}
|
|
onSwiper={(swiper) => {
|
|
setIsBeginning(swiper.isBeginning)
|
|
setIsEnd(swiper.isEnd)
|
|
}}
|
|
>
|
|
{sliders.map((slider) => (
|
|
<SwiperSlide key={slider._id}>
|
|
{slider.linkUrl ? (
|
|
<Link href={slider.linkUrl} className='block h-[200px] sm:h-[300px] md:h-[400px] relative'>
|
|
<Image
|
|
src={slider.imageUrl}
|
|
alt={slider.altText}
|
|
fill
|
|
className="object-cover rounded-lg"
|
|
/>
|
|
</Link>
|
|
) : (
|
|
<div className='h-[200px] sm:h-[300px] md:h-[400px] relative'>
|
|
<Image
|
|
src={slider.imageUrl}
|
|
alt={slider.altText}
|
|
fill
|
|
className="object-cover rounded-lg"
|
|
/>
|
|
</div>
|
|
)}
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
|
|
{/* Navigation buttons */}
|
|
<button
|
|
onClick={() => swiperRef.current?.swiper?.slidePrev()}
|
|
disabled={isBeginning}
|
|
className={`absolute left-2 top-1/2 -translate-y-1/2 z-10 rounded-full p-2 shadow-md transition-all duration-200 ${isBeginning
|
|
? 'bg-gray-100 cursor-not-allowed opacity-50'
|
|
: 'bg-white/80 hover:bg-white cursor-pointer'
|
|
}`}
|
|
>
|
|
<ArrowLeft2 size="20" color={isBeginning ? "#9CA3AF" : "#374151"} />
|
|
</button>
|
|
<button
|
|
onClick={() => swiperRef.current?.swiper?.slideNext()}
|
|
disabled={isEnd}
|
|
className={`absolute right-2 top-1/2 -translate-y-1/2 z-10 rounded-full p-2 shadow-md transition-all duration-200 ${isEnd
|
|
? 'bg-gray-100 cursor-not-allowed opacity-50'
|
|
: 'bg-white/80 hover:bg-white cursor-pointer'
|
|
}`}
|
|
>
|
|
<ArrowRight2 size="20" color={isEnd ? "#9CA3AF" : "#374151"} />
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Carousel |