116 lines
3.2 KiB
TypeScript
116 lines
3.2 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import { useEffect, useState } from "react";
|
|||
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|||
|
|
import { Navigation } from "swiper/modules";
|
|||
|
|
|
|||
|
|
import { NewsCard } from "./news-card";
|
|||
|
|
import { NavBtn } from "../home/ui/NavBtn";
|
|||
|
|
|
|||
|
|
import { useAppSelector } from "@/redux/hooks";
|
|||
|
|
import { selectHeader } from "@/redux/slices/headerSlice";
|
|||
|
|
import { NewsData } from "@/lib/types/NewsData.type";
|
|||
|
|
|
|||
|
|
import "swiper/css/bundle";
|
|||
|
|
|
|||
|
|
import "swiper/css";
|
|||
|
|
import "swiper/css/navigation";
|
|||
|
|
import "swiper/css/pagination";
|
|||
|
|
import "swiper/css/scrollbar";
|
|||
|
|
import Link from "next/link";
|
|||
|
|
import { useLang } from "@/utils/useLang";
|
|||
|
|
import { GreenBtn } from "../ui/Buttons";
|
|||
|
|
import { Title } from "../ui/title";
|
|||
|
|
import Loader from "@/components/ui/Loader";
|
|||
|
|
|
|||
|
|
export const News = () => {
|
|||
|
|
const [newsData, setNewsData] = useState<NewsData>();
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
|
|||
|
|
const { activeLang } = useAppSelector(selectHeader);
|
|||
|
|
|
|||
|
|
const fetchNews = async () => {
|
|||
|
|
try {
|
|||
|
|
setLoading(true);
|
|||
|
|
const response = await fetch(`https://turkmenexpo.com/app/api/v1/news`, {
|
|||
|
|
next: { revalidate: 1800 },
|
|||
|
|
headers: {
|
|||
|
|
"Accept-Language": activeLang.localization,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (!response.ok) {
|
|||
|
|
throw new Error(`Fetch failed with status ${response.status}`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const data = await response.json();
|
|||
|
|
setNewsData(data);
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error("Fetch error:", error);
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
fetchNews();
|
|||
|
|
}, [activeLang.localization]);
|
|||
|
|
|
|||
|
|
if (loading) {
|
|||
|
|
<Loader className="h-[300px] w-full mx-auto" />;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<section>
|
|||
|
|
<div className="container w-full">
|
|||
|
|
<header className="flex items-center mb-5 sm:mb-[43px] justify-between">
|
|||
|
|
<Title text={useLang("News", "Новости", activeLang.localization)} />
|
|||
|
|
<div className="hidden sm:flex items-center gap-5">
|
|||
|
|
<NavBtn left />
|
|||
|
|
<NavBtn />
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<div className="sm:mb-[35px]">
|
|||
|
|
<Swiper
|
|||
|
|
modules={[Navigation]}
|
|||
|
|
spaceBetween={20}
|
|||
|
|
slidesPerView={1}
|
|||
|
|
breakpoints={{
|
|||
|
|
1024: { slidesPerView: 3 },
|
|||
|
|
768: { slidesPerView: 2.5 },
|
|||
|
|
640: { slidesPerView: 2 },
|
|||
|
|
440: { slidesPerView: 1.5 },
|
|||
|
|
}}
|
|||
|
|
navigation={{
|
|||
|
|
prevEl: ".prev-btn",
|
|||
|
|
nextEl: ".next-btn",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{loading ? (
|
|||
|
|
<Loader className="h-[300px]" />
|
|||
|
|
) : (
|
|||
|
|
newsData?.data.map((item, i) => (
|
|||
|
|
<SwiperSlide key={i}>
|
|||
|
|
<NewsCard
|
|||
|
|
id={item.id}
|
|||
|
|
title={item.title}
|
|||
|
|
date={item.published_at}
|
|||
|
|
img={item.featured_images[0].path}
|
|||
|
|
/>
|
|||
|
|
</SwiperSlide>
|
|||
|
|
))
|
|||
|
|
)}
|
|||
|
|
</Swiper>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Link href={"/news"} className="hidden sm:flex justify-center">
|
|||
|
|
<GreenBtn
|
|||
|
|
text={useLang("All news", "Все новости", activeLang.localization)}
|
|||
|
|
/>
|
|||
|
|
</Link>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
);
|
|||
|
|
};
|