Fix layout issues & co-locate components (#46)

* Fix layout issues & co-locate components * Fix front page * Fix centering
2026-07-23 04:26:57 +00:00 · 2023-07-04 13:26:25 +02:00
parent a9822b65fe
commit 75a6c74306
26 changed files with 306 additions and 305 deletions
@@ -0,0 +1,44 @@
+import { useMap } from "react-leaflet";
+import { useEffect } from "react";
+import { useTranslations } from "next-intl";
+import L from "leaflet";
+
+const Legend = () => {
+  const t = useTranslations("App");
+  const map = useMap();
+
+  useEffect(() => {
+    if (map) {
+      // @ts-ignore
+      const legend = L.control({ position: "bottomleft" });
+
+      legend.onAdd = () => {
+        const div = L.DomUtil.create("div", "map-legend");
+        div.setAttribute(
+          "style",
+          "background: white; color: black; border: 2px solid grey; border-radius: 6px; padding: 10px;"
+        );
+        div.innerHTML = `<ul>
+            <li><span style='background:#00ac39; display: block; height: 16px; width: 30px; border: 1px solid #999; float: left; margin-right: 5px'></span>${t(
+              "tcClassic"
+            )}</li>
+            <li><span style='background:#0086c7; display: block; height: 16px; width: 30px; border: 1px solid #999; float: left; margin-right: 5px'></span>${t(
+              "tcRapid"
+            )}</li>
+            <li><span style='background:#cec348; display: block; height: 16px; width: 30px; border: 1px solid #999; float: left; margin-right: 5px'></span>${t(
+              "tcBlitz"
+            )}</li>
+            <li><span style='background:#d10c3e; display: block; height: 16px; width: 30px; border: 1px solid #999; float: left; margin-right: 5px'></span>${t(
+              "tcKO"
+            )}</li>
+            </ul>`;
+        return div;
+      };
+
+      legend.addTo(map);
+    }
+  }, [map, t]);
+  return null;
+};
+
+export default Legend;