53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import Image from "next/image";
|
|
import { useMediaQuery } from "usehooks-ts";
|
|
import { useAppSelector } from "@/redux/hooks";
|
|
import { useSliderBanner } from "@/hooks/use-slider";
|
|
import Loader from "../ui/Loader";
|
|
|
|
export const SliderClient = () => {
|
|
const isTab = useMediaQuery("(min-width: 1024px)");
|
|
const isMd = useMediaQuery("(min-width: 700px)");
|
|
|
|
const [data, setData] = useState<any>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const bannerType = useSliderBanner(isTab, isMd);
|
|
const lang = useAppSelector(
|
|
(state) => state.headerSlice.activeLang.localization
|
|
);
|
|
|
|
const fetchData = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const res = await fetch(`/api/banners?bannerType=${bannerType}`, {
|
|
headers: {
|
|
"Accept-Language": lang,
|
|
},
|
|
});
|
|
const json = await res.json();
|
|
setData(json);
|
|
setLoading(false);
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, [bannerType, lang]);
|
|
|
|
if (loading) return <Loader className="h-[600px] min-h-[320px]" />;
|
|
|
|
return (
|
|
<Image
|
|
src={data.data.banner_items?.[0]?.image || ""}
|
|
alt="Баннер"
|
|
width={1920}
|
|
height={600}
|
|
className="object-cover max-h-[600px] min-h-[320px] size-full object-center"
|
|
/>
|
|
);
|
|
};
|