procurement-frontend2/src/app/[locale]/news/[id]/page.tsx
2024-09-10 15:02:17 +06:00

93 lines
2.4 KiB
TypeScript

/* eslint-disable @next/next/no-img-element */
import { apiInstance } from "@/shared/config/apiConfig";
import { INews, NewsDataResponse } from "@/shared/types/news-type";
import { Metadata } from "next";
import { Container, Title } from "@/shared/ui";
export async function generateMetadata({
params,
}: {
params: { id: string };
}): Promise<Metadata> {
const response = await apiInstance.get<INews>(`/news/${params.id}/`);
return {
title: response.data.title,
openGraph: {
images: [response.data.image],
type: "article",
publishedTime: response.data.created_at,
},
};
}
const formatDescription = (text: string) => {
return text.replace(/(\r\n|\n|\r)/g, "<br />");
};
const NewsDetails = async ({
params,
}: {
params: { id: string; новость: string };
}) => {
const getNewsById = async () => {
const response = await apiInstance.get<NewsDataResponse>(
`/news/${params.id}/`
);
return response.data.news_data;
};
const data = await getNewsById();
console.log(data);
const months: Record<string, string> = {
"01": "Январь",
"02": "Февраль",
"03": "Март",
"04": "Апрель",
"05": "Май",
"06": "Июнь",
"07": "Июль",
"08": "Август",
"09": "Сентябрь",
"10": "Октябрь",
"11": "Ноябрь",
"12": "Декабрь",
};
return (
<Container className="flex flex-col gap-[40px] py-[100px]">
<p className="text-light-blue font-semibold text-center mb-3">
{months[data.created_at.slice(5, 7)]}{" "}
{data.created_at.slice(8, 10) === "0"
? data.created_at.slice(9, 10)
: data.created_at.slice(8, 10)}
, {data.created_at.slice(0, 4)}
</p>
<Title
text={data.title}
size="lg"
className="text-[48px] leading-[60px] font-semibold text-center mb-6"
/>
<div>
<img
className="mb-[30px] w-full h-[598px] rounded-sm object-cover"
src={`http://api.procurement.fishrungames.com/${data.image}`}
alt="News Image"
/>
</div>
<div className="w-full flex flex-col gap-[10px] ">
<div
className="text-[20px] leading-[34px]"
dangerouslySetInnerHTML={{
__html: formatDescription(data.content),
}}
/>
</div>
</Container>
);
};
export default NewsDetails;