80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
'use client';
|
|
import Image from 'next/image';
|
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
|
import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from 'swiper';
|
|
import { v4 } from 'uuid';
|
|
import Link from 'next/link';
|
|
import { Queries } from '@/api/queries';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import Loader from '../Loader';
|
|
|
|
interface IProps {
|
|
sliderNumber: number;
|
|
}
|
|
|
|
const SmallSwiperAdvert = ({ sliderNumber }: IProps) => {
|
|
const { data, isFetching, error } = useQuery({
|
|
queryKey: [sliderNumber === 3 ? 'small_slider3' : sliderNumber === 4 ? 'small_slider4' : ''],
|
|
queryFn: () =>
|
|
sliderNumber === 3
|
|
? Queries.getSmallSlider3()
|
|
: sliderNumber === 4
|
|
? Queries.getSmallSlider4()
|
|
: null,
|
|
});
|
|
|
|
if (isFetching) return <Loader height={'100%'} />;
|
|
if (error) return <h1>{JSON.stringify(error)}</h1>;
|
|
|
|
return (
|
|
<div className="small-swiper overflow-hidden">
|
|
<Swiper
|
|
className="h-full overflow-hidden"
|
|
modules={[Navigation, Pagination, Scrollbar, A11y, Autoplay]}
|
|
slidesPerView={1}
|
|
spaceBetween={0}
|
|
navigation
|
|
autoplay={{ delay: 4200 }}
|
|
speed={700}
|
|
loop
|
|
pagination={{
|
|
clickable: true,
|
|
}}>
|
|
{/* PAY ATTENTION [data] is wrapped in an array */}
|
|
{data?.data.map((item) => (
|
|
<SwiperSlide key={v4()} className="overflow-hidden">
|
|
{item.url || item.page_id ? (
|
|
<Link
|
|
// href={item.url ? item.url : `advertisment_page/${item.page_id}`}
|
|
href={item.url ? item.url : item.page_id ? `/${item.page_id}` : ''}
|
|
className="overflow-hidden w-full lg:h-full h-[200px] flex">
|
|
<Image
|
|
src={item.image}
|
|
alt="small_banner"
|
|
fill
|
|
unoptimized
|
|
unselectable="off"
|
|
className={` pointer-events-none overflow-hidden`}
|
|
/>
|
|
</Link>
|
|
) : (
|
|
<div className="overflow-hidden w-full h-full">
|
|
<Image
|
|
src={item.image}
|
|
alt="small_banner"
|
|
fill
|
|
unoptimized
|
|
unselectable="off"
|
|
className={` pointer-events-none overflow-hidden`}
|
|
/>
|
|
</div>
|
|
)}
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SmallSwiperAdvert;
|