forked from Transparency/kgroad-frontend2
76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
import "./ReportInformation.scss";
|
||
import RoadType from "@/entities/RoadType/RoadType";
|
||
import ReportLike from "@/features/ReportLike/ReportLike";
|
||
import { IAuthor } from "@/shared/types/author-type";
|
||
import { ILocation } from "@/shared/types/location-type";
|
||
import calendar from "./icons/calendar.svg";
|
||
import { ROAD_TYPES_COLORS } from "@/shared/variables/road-types";
|
||
import Image from "next/image";
|
||
import { MONTHS } from "@/shared/variables/month";
|
||
import ShowMapButton from "@/features/ShowMapButton/ShowMapButton";
|
||
import { getTranslations } from "next-intl/server";
|
||
|
||
interface IReportInformationProps {
|
||
id: number;
|
||
location: ILocation;
|
||
date: string;
|
||
description: string;
|
||
category: number;
|
||
total_likes: number;
|
||
author: IAuthor;
|
||
}
|
||
|
||
const ReportInformation: React.FC<IReportInformationProps> = async ({
|
||
id,
|
||
location,
|
||
date,
|
||
description,
|
||
category,
|
||
total_likes,
|
||
author,
|
||
}: IReportInformationProps) => {
|
||
const t = await getTranslations("home");
|
||
|
||
const ROAD_TYPES: Record<number, string> = {
|
||
1: t("broken_roads"),
|
||
2: t("accident_hotspots"),
|
||
3: t("local_defects"),
|
||
4: t("repair_plans"),
|
||
5: t("repaired"),
|
||
6: t("fixed_local_defects"),
|
||
};
|
||
return (
|
||
<div className="report-information">
|
||
<RoadType color={ROAD_TYPES_COLORS[category]}>
|
||
{ROAD_TYPES[category]}
|
||
</RoadType>
|
||
<h2>{location.address}</h2>
|
||
<div className="report-information__date-and-like">
|
||
<div className="report-information__date">
|
||
<Image src={calendar} alt="Calendar Icon" />
|
||
<p>
|
||
{MONTHS[date.slice(5, 7)]}{" "}
|
||
{date.slice(5, 7).slice(0, 1) === "0"
|
||
? date.slice(6, 7)
|
||
: date.slice(5, 7)}
|
||
, {date.slice(0, 4)}
|
||
</p>
|
||
</div>
|
||
<ReportLike count={total_likes} report_id={id} />
|
||
</div>
|
||
|
||
<p className="report-information__description">{description}</p>
|
||
|
||
<p className="report-information__author">
|
||
Автор обращения:{" "}
|
||
<span>
|
||
{author.first_name} {author.last_name.slice(0, 1)}.
|
||
</span>
|
||
</p>
|
||
<ShowMapButton />
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ReportInformation;
|