diff --git a/src/app/[locale]/news/[id]/icons/calendar.svg b/src/app/[locale]/news/[id]/icons/calendar.svg new file mode 100644 index 0000000..e318ec7 --- /dev/null +++ b/src/app/[locale]/news/[id]/icons/calendar.svg @@ -0,0 +1,17 @@ + + + Created with Pixso. + + + + + + + + + + + + + + diff --git a/src/app/[locale]/news/[id]/icons/message.svg b/src/app/[locale]/news/[id]/icons/message.svg new file mode 100644 index 0000000..35f5825 --- /dev/null +++ b/src/app/[locale]/news/[id]/icons/message.svg @@ -0,0 +1,14 @@ + + + Created with Pixso. + + + + + + + + + + + diff --git a/src/app/[locale]/news/[id]/page.tsx b/src/app/[locale]/news/[id]/page.tsx new file mode 100644 index 0000000..3aeb96c --- /dev/null +++ b/src/app/[locale]/news/[id]/page.tsx @@ -0,0 +1,94 @@ +/* eslint-disable @next/next/no-img-element */ +import { apiInstance } from "@/shared/config/apiConfig"; +import { INews, INewsData, NewsDataResponse } from "@/shared/types/news-type"; +import Image from "next/image"; +import calendar from "./icons/calendar.svg"; +import { Metadata } from "next"; +import { Container, Title } from "@/shared/ui"; + +export async function generateMetadata({ + params, +}: { + params: { id: string }; +}): Promise { + const response = await apiInstance.get(`/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, "
"); +}; + +const NewsDetails = async ({ + params, +}: { + params: { id: string; новость: string }; +}) => { + const getNewsById = async () => { + const response = await apiInstance.get( + `/news/${params.id}/` + ); + return response.data.news_data; + }; + + const data = await getNewsById(); + console.log(data); + + const months: Record = { + "01": "Январь", + "02": "Февраль", + "03": "Март", + "04": "Апрель", + "05": "Май", + "06": "Июнь", + "07": "Июль", + "08": "Август", + "09": "Сентябрь", + "10": "Октябрь", + "11": "Ноябрь", + "12": "Декабрь", + }; + + return ( + +

+ {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)} +

+ + + <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; diff --git a/src/entities/NewsCard.tsx b/src/entities/NewsCard.tsx index b8ac8f7..11c84e1 100644 --- a/src/entities/NewsCard.tsx +++ b/src/entities/NewsCard.tsx @@ -1,3 +1,4 @@ +import { Link } from "@/shared/config/navigation"; import { Title } from "@/shared/ui"; import Image, { StaticImageData } from "next/image"; @@ -28,21 +29,28 @@ const NewsCard = ({ id, image, title, content, date }: INewsCard) => { }; return ( <div className="w-[393px] h-[508px] bg-white shadow-sm p-6 flex flex-col"> - <Image - src={image} - alt="Card image" - width={345} - height={240} - className="mb-[32px]" - /> - <Title - text={sliceTitle(title)} - className="text-[24px] font-semibold mb-[12px]" - /> - <p className="leading-6 text-gray-600 mb-[46px]"> - {sliceDescription(content)} - </p> - <p className="text-[14px] text-gray-600">{sliceDate(date)}</p> + <Link + href={{ + pathname: `/news/${id}`, + query: { новость: title }, + }} + > + <Image + src={image} + alt="Card image" + width={345} + height={240} + className="mb-[32px]" + /> + <Title + text={sliceTitle(title)} + className="text-[24px] font-semibold mb-[12px]" + /> + <p className="leading-6 text-gray-600 mb-[46px]"> + {sliceDescription(content)} + </p> + <p className="text-[14px] text-gray-600">{sliceDate(date)}</p> + </Link> </div> ); }; diff --git a/src/shared/types/news-type.ts b/src/shared/types/news-type.ts index ca44e80..1f8eb2b 100644 --- a/src/shared/types/news-type.ts +++ b/src/shared/types/news-type.ts @@ -7,7 +7,9 @@ export interface INews { image: string; created_at: string; } - +export interface NewsDataResponse { + news_data: INews; +} export interface INewsList extends IList { results: INews[]; }