added legend filters

src/components/layout/Legend.scss

@@ -16,9 +16,33 @@
         }
     }
 
+    h2 {
+        font-size: 1.8rem;
+        font-weight: 700;
+        margin-bottom: 15px;
+        margin-top: 20px;
+        color: white;
+        width: fit-content;
+
+        border-bottom: 1px solid #a8a8a8;
+
+        @media (max-width: 768px) {
+            font-size: 1rem;
+        }
+    }
+
     .border {
         width: 100%;
         height: 1px;
         background-color: #d78453;
+        margin-bottom: 20px;
+    }
+
+    .form {
+        display: flex;
+        flex-direction: column;
+        gap: 15px;
+
+        padding-left: 7px;
     }
 }

src/components/layout/Legend.tsx

@@ -1,13 +1,60 @@
+import React from "react";
 import "./Legend.scss";
+import CityIcon from "../icons/CityIcon.tsx";
+import StarIcon from "../icons/StarIcon.tsx";
+import LegendCheckbox from "../common/LegendCheckbox.tsx";
+import CapitalIcon from "../icons/CapitalIcon.tsx";
 
-const Legend = () => {
+interface LegendProps {
+    showCapitals: boolean;
+    showSettlements: boolean;
+    showPOIs: boolean;
+    onUpdated: (showCapitals: boolean, showSettlements: boolean, showPOIs: boolean) => void;
+}
+
+const Legend: React.FC<LegendProps> = ({ showCapitals, showSettlements, showPOIs, onUpdated }) => {
+    const onCheckboxUpdate = (type: "capitals" | "settlements" | "pois", checked: boolean) => {
+        onUpdated(
+            type === "capitals" ? checked : showCapitals,
+            type === "settlements" ? checked : showSettlements,
+            type === "pois" ? checked : showPOIs
+        );
+    };
 
     return (
         <div className="legend">
             <h1>Interactive Map of the Magic Continent</h1>
             <div className="border"></div>
+
+            <h2>Filters</h2>
+
+            <div className="form">
+                <LegendCheckbox
+                    key="capital-checkbox"
+                    label="Capitals"
+                    icon={<CapitalIcon />}
+                    checked={showCapitals}
+                    onUpdated={(checked) => onCheckboxUpdate("capitals", checked)}
+                />
+
+                <LegendCheckbox
+                    key="city-checkbox"
+                    label="Settlements"
+                    icon={<CityIcon />}
+                    checked={showSettlements}
+                    onUpdated={(checked) => onCheckboxUpdate("settlements", checked)}
+                />
+
+                <LegendCheckbox
+                    key="poi-checkbox"
+                    label="Points of Interest"
+                    icon={<StarIcon />}
+                    checked={showPOIs}
+                    onUpdated={(checked) => onCheckboxUpdate("pois", checked)}
+                />
+            </div>
         </div>
-    )
+    );
 }
 
 export default Legend;