feat: Route list page

src/pages/Station/StationPreviewPage/index.tsx

@@ -0,0 +1,77 @@
+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";
+
+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 h-full p-3 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>
+        )}
+      </div>
+    </Paper>
+  );
+});