92 lines
2.5 KiB
TypeScript
92 lines
2.5 KiB
TypeScript
"use client";
|
||
|
||
import React from "react";
|
||
import Image from "next/image";
|
||
|
||
import { GreenBtn } from "@/components/ui/Buttons";
|
||
|
||
import { useAppDispatch, useAppSelector } from "@/redux/hooks";
|
||
import { selectHeader, setShowInput } from "@/redux/slices/headerSlice";
|
||
import { baseAPI } from "@/lib/API";
|
||
import { NewsPageType } from "@/lib/types/NewsPage.type";
|
||
import Link from "next/link";
|
||
import { BreadCrumbs } from "@/components/ui/bread-crumbs";
|
||
import { Title } from "@/components/ui/Title";
|
||
import Loader from "@/components/ui/Loader";
|
||
|
||
export default function SingleNewsPage({ params }: { params: { id: string } }) {
|
||
const dispatch = useAppDispatch();
|
||
|
||
const { activeLang } = useAppSelector(selectHeader);
|
||
const [newsItemData, setNewsItemData] = React.useState<NewsPageType>();
|
||
|
||
const fetchData = async () => {
|
||
try {
|
||
const response = await fetch(`${baseAPI}news/${params.id}`, {
|
||
headers: {
|
||
"Accept-Language": activeLang.localization,
|
||
},
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error("error");
|
||
}
|
||
|
||
const data = await response.json();
|
||
|
||
setNewsItemData(data);
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
};
|
||
|
||
React.useEffect(() => {
|
||
fetchData();
|
||
dispatch(setShowInput(false));
|
||
}, [activeLang.localization]);
|
||
|
||
return (
|
||
<div className="section-mb w-full">
|
||
<BreadCrumbs second="Новости" path="/news" third="Статья" />
|
||
{newsItemData ? (
|
||
<div className="mb-5">
|
||
<Title text={newsItemData.data.title} />
|
||
</div>
|
||
) : (
|
||
<Loader />
|
||
)}
|
||
|
||
<div className="flex items-center justify-between mb-[44px] md:mb-8">
|
||
<p className="text-[#919599]">{newsItemData?.data.published_at}</p>
|
||
</div>
|
||
|
||
{newsItemData?.data?.featured_images?.[0]?.path && (
|
||
<Image
|
||
height={480}
|
||
width={833}
|
||
src={newsItemData?.data.featured_images[0]?.path || ""}
|
||
alt="картинка"
|
||
className="mb-6 max-h-[480px] object-cover w-full"
|
||
/>
|
||
)}
|
||
<div className="mb-[50px]">
|
||
{newsItemData && (
|
||
<>
|
||
<div
|
||
dangerouslySetInnerHTML={{
|
||
__html: newsItemData.data.content_html,
|
||
}}
|
||
className="text-[16px] flex flex-col gap-6 leading-[150%] seperate-news-html"
|
||
/>
|
||
<br />
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
<Link href="/news" className="flex justify-center">
|
||
<GreenBtn text="Все новости" px />
|
||
</Link>
|
||
</div>
|
||
);
|
||
}
|