Merge branch 'legend' into 'main'

Legend

See merge request leaders2022/postamates_frontend!1

src/Map/MapComponent.jsx

@@ -6,6 +6,7 @@ import { Layers } from "./Layers";
 import { MapPopup } from "./Popup";
 import { MaplibreExportControl } from "@watergis/maplibre-gl-export";
 import { Basemap } from "./Basemap";
+import { Legend } from "../modules/Sidebar/Legend";
 
 const ruTranslation = {
   PageSize: "Размер",
@@ -150,6 +151,8 @@ export const MapComponent = () => {
       <Layers />
 
       <Sidebar />
+
+      <Legend />
     </Map>
   );
 };

src/Map/layers-config.js

@@ -4,7 +4,7 @@
 // dk - дома культуры и клубы
 // sport - спортивные объекты
 
-const pointColors = {
+export const pointColors = {
   kiosk: "#112cda",
   mfc: "#932301",
   library: "#a51eda",

src/modules/Sidebar/Legend.jsx

@@ -0,0 +1,59 @@
+import { Title } from "../../components/Title";
+import { pointColors } from "../../Map/layers-config";
+
+const types = [
+  { color: pointColors.kiosk, id: "kiosk", name: "Городские киоски" },
+  { color: pointColors.mfc, id: "mfc", name: "МФЦ" },
+  { color: pointColors.library, id: "library", name: "Библиотеки" },
+  { color: pointColors.dk, id: "dk", name: "Дома культуры и клубы" },
+  { color: pointColors.sport, id: "sport", name: "Спортивные объекты" },
+];
+
+export function Legend() {
+  return (
+    <div className="absolute bottom-[10px] left-[10px] bg-white-background w-[300px] rounded-xl p-3 max-h-[calc(100vh-30px)] overflow-y-auto">
+      <div className="space-y-5">
+        <Title text={"Легенда"} className={"mb-1"} />
+
+        <div className="flex  gap-1 items-center justify-between">
+          <span className="text-sm">Тепловая карта</span>
+
+          <div className="flex">
+            <div
+              className="w-5 h-5 relative"
+              style={{ background: "rgb(204,34,34)" }}
+            >
+              <span className="absolute top-5 left-1">0</span>
+            </div>
+            <div
+              className="w-5 h-5 relative"
+              style={{ background: "rgb(255,221,52)" }}
+            >
+              <span className="absolute top-5 left-1">25</span>
+            </div>
+            <div
+              className="w-5 h-5 relative"
+              style={{ background: "rgb(30,131,42)" }}
+            >
+              <span className="absolute top-5 left-1">40</span>
+            </div>
+          </div>
+        </div>
+
+        {types.map((type) => (
+          <div
+            className="flex gap-1 items-center justify-between"
+            key={type.id}
+          >
+            <span className="text-sm">{type.name}</span>
+
+            <span
+              className="rounded-xl w-3 h-3 inline-block"
+              style={{ backgroundColor: type.color }}
+            ></span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}