forked from Transparency/kgroad-frontend2
added next-intl, composed next-auth and next-intl in middleware, fixed some bugs, completed details page, added google auth
This commit is contained in:
Alibek committed
1 parent
9cd7b2a67d
commit
6637ab4eae
172 files changed
+1772
-502
No files matched your search
@@ -0,0 +1,21 @@
|
||||
.news {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
|
||||
h2 {
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.news {
|
||||
gap: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 550px) {
|
||||
.news {
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
.news-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
|
||||
&__img {
|
||||
align-self: center;
|
||||
#news-img {
|
||||
margin-bottom: 30px;
|
||||
width: 100%;
|
||||
max-width: 1072px;
|
||||
height: 598px;
|
||||
border-radius: 12px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
&__date-and-reviews {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 80px;
|
||||
}
|
||||
|
||||
&__date,
|
||||
&__reviews {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
p {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
color: rgba(62, 50, 50, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
width: 100%;
|
||||
max-width: 1072px;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
color: rgb(62, 50, 50);
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
line-height: 29px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.news-details {
|
||||
gap: 30px;
|
||||
|
||||
&__img {
|
||||
#news-img {
|
||||
margin-bottom: 25px;
|
||||
height: 392px;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 550px) {
|
||||
.news-details {
|
||||
gap: 20px;
|
||||
|
||||
&__img {
|
||||
#news-img {
|
||||
margin-bottom: 20px;
|
||||
height: 231px;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 140%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 |
@@ -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 |
@@ -0,0 +1,75 @@
|
||||
import Typography from "@/shared/ui/components/Typography/Typography";
|
||||
import "./NewsDetails.scss";
|
||||
import { apiInstance } from "@/shared/config/apiConfig";
|
||||
import { INews } from "@/shared/types/news-type";
|
||||
import Image from "next/image";
|
||||
import message from "./icons/message.svg";
|
||||
import calendar from "./icons/calendar.svg";
|
||||
import ReviewSection from "@/widgets/ReviewSection/ReviewSection";
|
||||
|
||||
const NewsDetails = async ({
|
||||
params,
|
||||
}: {
|
||||
params: { id: string };
|
||||
}) => {
|
||||
const getNewsById = async () => {
|
||||
const response = await apiInstance.get<INews>(
|
||||
`/news/${params.id}/`
|
||||
);
|
||||
|
||||
return response.data;
|
||||
};
|
||||
|
||||
const data = await getNewsById();
|
||||
|
||||
const months: Record<string, string> = {
|
||||
"01": "Январь",
|
||||
"02": "Февраль",
|
||||
"03": "Март",
|
||||
"04": "Апрель",
|
||||
"05": "Май",
|
||||
"06": "Июнь",
|
||||
"07": "Июль",
|
||||
"08": "Август",
|
||||
"09": "Сентябрь",
|
||||
"10": "Октябрь",
|
||||
"11": "Ноябрь",
|
||||
"12": "Декабрь",
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="news-details page-padding">
|
||||
<Typography element="h2">{data.title}</Typography>
|
||||
|
||||
<div className="news-details__img">
|
||||
<img id="news-img" src={data.image} alt="News Image" />
|
||||
<div className="news-details__date-and-reviews">
|
||||
<div className="news-details__date">
|
||||
<Image src={calendar} alt="Calendar Icon" />
|
||||
<p>
|
||||
{months[data.created_at.slice(5, 7)]}{" "}
|
||||
{data.created_at.slice(5, 7).slice(0, 1) === "0"
|
||||
? data.created_at.slice(6, 7)
|
||||
: data.created_at.slice(5, 7)}
|
||||
, {data.created_at.slice(0, 4)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="news-details__reviews">
|
||||
<Image src={message} alt="Message Icon" />
|
||||
<p>Комментарии: {data.count_reviews}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="news-details__text">
|
||||
<h3>{data.title}</h3>
|
||||
<p>{data.description}</p>
|
||||
</div>
|
||||
|
||||
<ReviewSection endpoint="news" id={data.id} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewsDetails;
|
||||
@@ -0,0 +1,28 @@
|
||||
import "./News.scss";
|
||||
import Typography from "@/shared/ui/components/Typography/Typography";
|
||||
import NewsList from "@/widgets/NewsList/NewsList";
|
||||
import { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "KG ROAD | Новости",
|
||||
description:
|
||||
"Страница новостей Kyrgyzstan Transperency International",
|
||||
};
|
||||
|
||||
const News = ({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: {
|
||||
["страница-новостей"]: string;
|
||||
};
|
||||
}) => {
|
||||
return (
|
||||
<div className="news page-padding">
|
||||
<Typography element="h2">Новости</Typography>
|
||||
|
||||
<NewsList searchParams={searchParams} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default News;
|
||||
Reference in new issue
Block a user