100 lines
2.7 KiB
TypeScript
100 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import "swiper/css";
|
|
import "swiper/css/navigation";
|
|
import "swiper/css/pagination";
|
|
import "swiper/css/scrollbar";
|
|
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
import Image from "next/image";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import { SliderType } from "@/lib/types/SliderData.type";
|
|
import { useSliderBanner } from "@/hooks/use-slider";
|
|
import { useMediaQuery } from "usehooks-ts";
|
|
import { Autoplay, Pagination } from "swiper/modules";
|
|
import Loader from "../ui/Loader";
|
|
import { baseAPI } from "@/lib/API";
|
|
import Link from "next/link";
|
|
import clsx from "clsx";
|
|
|
|
export const Slider = ({ lang }: { lang: string }) => {
|
|
const isTab = useMediaQuery("(min-width: 1024px)");
|
|
const isMd = useMediaQuery("(min-width: 700px)");
|
|
|
|
const [sliderData, setData] = useState<SliderType>();
|
|
const [loading, setLoading] = useState(true);
|
|
const size = useSliderBanner(isTab, isMd);
|
|
|
|
const fetchData = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const res = await fetch(`${baseAPI}banners/${size}`, {
|
|
headers: {
|
|
"Accept-Language": lang,
|
|
},
|
|
});
|
|
|
|
if (!res.ok) {
|
|
throw new Error("Ошибка при загрузке данных");
|
|
}
|
|
|
|
const data: SliderType = await res.json();
|
|
setData(data);
|
|
setLoading(false);
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
};
|
|
|
|
const imgRef = useRef<HTMLImageElement>(null);
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, [size, lang]);
|
|
|
|
if (loading) return <Loader className="bg-white" />;
|
|
|
|
return (
|
|
<section className={clsx("h-full bg-white")}>
|
|
<Swiper
|
|
modules={[Autoplay, Pagination]}
|
|
loop
|
|
autoplay={{ delay: 5000 }}
|
|
speed={5000}
|
|
slidesPerView={1}
|
|
slidesPerGroup={1}
|
|
className="size-full"
|
|
>
|
|
{sliderData &&
|
|
sliderData?.data.banner_items.map((item, i) => (
|
|
<SwiperSlide key={i} className="size-full cursor-pointer">
|
|
<Link
|
|
href={item.link ? item.link : ""}
|
|
target="_blank"
|
|
className="size-full"
|
|
>
|
|
{item.image.includes(".mp4") ? (
|
|
<video
|
|
src={item.image}
|
|
className="size-full object-contain"
|
|
autoPlay
|
|
muted
|
|
/>
|
|
) : (
|
|
<Image
|
|
ref={imgRef}
|
|
height={600}
|
|
width={1920}
|
|
src={item?.image}
|
|
alt={item?.title}
|
|
className="object-contain size-full"
|
|
/>
|
|
)}
|
|
</Link>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</section>
|
|
);
|
|
};
|