Add news details page
This commit is contained in:
parent
d601659289
commit
a106044047
17
src/app/[locale]/news/[id]/icons/calendar.svg
Normal file
17
src/app/[locale]/news/[id]/icons/calendar.svg
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<svg width="16.000000" height="16.000000" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<desc>
|
||||||
|
Created with Pixso.
|
||||||
|
</desc>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip2340_50999">
|
||||||
|
<rect id="calendar" width="16.000000" height="16.000000" fill="white" fill-opacity="0"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
<rect id="calendar" width="16.000000" height="16.000000" fill="#FFFFFF" fill-opacity="0"/>
|
||||||
|
<g clip-path="url(#clip2340_50999)">
|
||||||
|
<path id="Vector" d="M12.666 2.66699C13.4023 2.66699 14 3.26367 14 4L14 13.334C14 14.0703 13.4023 14.667 12.666 14.667L3.33398 14.667C2.59766 14.667 2 14.0703 2 13.334L2 4C2 3.26367 2.59766 2.66699 3.33398 2.66699L12.666 2.66699Z" stroke="#6E6565" stroke-opacity="1.000000" stroke-width="1.000000" stroke-linejoin="round"/>
|
||||||
|
<path id="Vector" d="M10.666 1.33301L10.666 4" stroke="#6E6565" stroke-opacity="1.000000" stroke-width="1.000000" stroke-linejoin="round" stroke-linecap="round"/>
|
||||||
|
<path id="Vector" d="M5.33398 1.33301L5.33398 4" stroke="#6E6565" stroke-opacity="1.000000" stroke-width="1.000000" stroke-linejoin="round" stroke-linecap="round"/>
|
||||||
|
<path id="Vector" d="M2 6.66699L14 6.66699" stroke="#6E6565" stroke-opacity="1.000000" stroke-width="1.000000" stroke-linejoin="round" stroke-linecap="round"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
14
src/app/[locale]/news/[id]/icons/message.svg
Normal file
14
src/app/[locale]/news/[id]/icons/message.svg
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<svg width="16.000000" height="16.000000" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<desc>
|
||||||
|
Created with Pixso.
|
||||||
|
</desc>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip2340_51004">
|
||||||
|
<rect id="message-circle" width="16.000000" height="16.000000" fill="white" fill-opacity="0"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
<rect id="message-circle" width="16.000000" height="16.000000" fill="#FFFFFF" fill-opacity="0"/>
|
||||||
|
<g clip-path="url(#clip2340_51004)">
|
||||||
|
<path id="Vector" d="M13.4004 10.2002C12.9297 11.1416 12.207 11.9326 11.3125 12.4863C10.416 13.04 9.38477 13.333 8.33398 13.333C7.45312 13.3359 6.58594 13.1299 5.80078 12.7334L2 14L3.26758 10.2002C2.86914 9.41504 2.66406 8.54688 2.66602 7.66699C2.66797 6.61426 2.96094 5.58301 3.51367 4.68848C4.06641 3.79395 4.85938 3.07031 5.80078 2.59961C6.58594 2.20312 7.45312 1.99805 8.33398 2L8.66602 2C10.0566 2.07715 11.3691 2.66309 12.3535 3.64746C13.3359 4.63086 13.9238 5.94336 14 7.33301L14 7.66699C14.002 8.54688 13.7969 9.41504 13.4004 10.2002Z" stroke="#6E6565" stroke-opacity="1.000000" stroke-width="1.000000" stroke-linejoin="round"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
94
src/app/[locale]/news/[id]/page.tsx
Normal file
94
src/app/[locale]/news/[id]/page.tsx
Normal file
@ -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<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;
|
||||||
@ -1,3 +1,4 @@
|
|||||||
|
import { Link } from "@/shared/config/navigation";
|
||||||
import { Title } from "@/shared/ui";
|
import { Title } from "@/shared/ui";
|
||||||
import Image, { StaticImageData } from "next/image";
|
import Image, { StaticImageData } from "next/image";
|
||||||
|
|
||||||
@ -28,21 +29,28 @@ const NewsCard = ({ id, image, title, content, date }: INewsCard) => {
|
|||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<div className="w-[393px] h-[508px] bg-white shadow-sm p-6 flex flex-col">
|
<div className="w-[393px] h-[508px] bg-white shadow-sm p-6 flex flex-col">
|
||||||
<Image
|
<Link
|
||||||
src={image}
|
href={{
|
||||||
alt="Card image"
|
pathname: `/news/${id}`,
|
||||||
width={345}
|
query: { новость: title },
|
||||||
height={240}
|
}}
|
||||||
className="mb-[32px]"
|
>
|
||||||
/>
|
<Image
|
||||||
<Title
|
src={image}
|
||||||
text={sliceTitle(title)}
|
alt="Card image"
|
||||||
className="text-[24px] font-semibold mb-[12px]"
|
width={345}
|
||||||
/>
|
height={240}
|
||||||
<p className="leading-6 text-gray-600 mb-[46px]">
|
className="mb-[32px]"
|
||||||
{sliceDescription(content)}
|
/>
|
||||||
</p>
|
<Title
|
||||||
<p className="text-[14px] text-gray-600">{sliceDate(date)}</p>
|
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>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -7,7 +7,9 @@ export interface INews {
|
|||||||
image: string;
|
image: string;
|
||||||
created_at: string;
|
created_at: string;
|
||||||
}
|
}
|
||||||
|
export interface NewsDataResponse {
|
||||||
|
news_data: INews;
|
||||||
|
}
|
||||||
export interface INewsList extends IList {
|
export interface INewsList extends IList {
|
||||||
results: INews[];
|
results: INews[];
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user