forked from Transparency/kgroad-frontend2
81 lines
2.4 KiB
TypeScript
81 lines
2.4 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 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"),
|
||
};
|
||
|
||
const renderDescriptionWithLinks = (description: string) => {
|
||
const regex = /(?:https?|ftp):\/\/[\n\S]+/g;
|
||
return description.replace(regex, (match) => `<a href="${match}" target="_blank" rel="noopener noreferrer">${match}</a>`);
|
||
};
|
||
|
||
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>
|
||
{new Date(date).toLocaleDateString('ru-RU', {
|
||
day: 'numeric',
|
||
month: 'long',
|
||
year: 'numeric'
|
||
})}
|
||
</p>
|
||
</div>
|
||
<ReportLike count={total_likes} report_id={id} />
|
||
</div>
|
||
|
||
<p className="report-information__description" dangerouslySetInnerHTML={{ __html: renderDescriptionWithLinks(description) }} />
|
||
|
||
<p className="report-information__author">
|
||
Автор обращения:{" "}
|
||
<span>
|
||
{author.first_name} {author.last_name.slice(0, 1)}.
|
||
</span>
|
||
</p>
|
||
<ShowMapButton />
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ReportInformation;
|