90 lines
2.8 KiB
TypeScript
90 lines
2.8 KiB
TypeScript
import { Paper } from "@mui/material";
|
||
import { languageStore, stationsStore } from "@shared";
|
||
import { LanguageSwitcher } from "@widgets";
|
||
import { observer } from "mobx-react-lite";
|
||
import { ArrowLeft } from "lucide-react";
|
||
import { useEffect } from "react";
|
||
import { useNavigate, useParams } from "react-router-dom";
|
||
import { LinkedSights } from "../LinkedSights";
|
||
|
||
export const StationPreviewPage = observer(() => {
|
||
const { id } = useParams();
|
||
const { stationPreview, getStationPreview } = stationsStore;
|
||
const navigate = useNavigate();
|
||
const { language } = languageStore;
|
||
|
||
useEffect(() => {
|
||
(async () => {
|
||
if (id) {
|
||
await getStationPreview(Number(id));
|
||
}
|
||
})();
|
||
}, [id, language]);
|
||
|
||
return (
|
||
<Paper className="w-full p-3 py-5 flex flex-col gap-10">
|
||
<LanguageSwitcher />
|
||
<div className="flex justify-between items-center">
|
||
<button
|
||
className="flex items-center gap-2"
|
||
onClick={() => navigate(-1)}
|
||
>
|
||
<ArrowLeft size={20} />
|
||
Назад
|
||
</button>
|
||
</div>
|
||
<div className="flex flex-col gap-10 w-full">
|
||
<div className="flex flex-col gap-2">
|
||
<h1 className="text-lg font-bold">Название</h1>
|
||
<p>{stationPreview[id!]?.[language]?.data.name}</p>
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-2">
|
||
<h1 className="text-lg font-bold">Системное название</h1>
|
||
<p>{stationPreview[id!]?.[language]?.data.system_name}</p>
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-2">
|
||
<h1 className="text-lg font-bold">Направление</h1>
|
||
<p
|
||
className={`${
|
||
stationPreview[id!]?.[language]?.data.direction
|
||
? "text-green-500"
|
||
: "text-red-500"
|
||
}`}
|
||
>
|
||
{stationPreview[id!]?.[language]?.data.direction
|
||
? "Прямой"
|
||
: "Обратный"}
|
||
</p>
|
||
</div>
|
||
|
||
{stationPreview[id!]?.[language]?.data.address && (
|
||
<div className="flex flex-col gap-2">
|
||
<h1 className="text-lg font-bold">Адрес</h1>
|
||
<p>{stationPreview[id!]?.[language]?.data.address}</p>
|
||
</div>
|
||
)}
|
||
|
||
{stationPreview[id!]?.[language]?.data.description && (
|
||
<div className="flex flex-col gap-2">
|
||
<h1 className="text-lg font-bold">Описание</h1>
|
||
<p>{stationPreview[id!]?.[language]?.data.description}</p>
|
||
</div>
|
||
)}
|
||
|
||
{id && (
|
||
<LinkedSights
|
||
parentId={Number(id)}
|
||
fields={[
|
||
{ label: "Название", data: "name" },
|
||
{ label: "Описание", data: "description" },
|
||
]}
|
||
type="show"
|
||
/>
|
||
)}
|
||
</div>
|
||
</Paper>
|
||
);
|
||
});
|