[frontend]: Refactor into separate components

frontend/src/components/LoadingOverlay.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+const LoadingOverlay = () => (
+    <div style={{
+        position: "absolute", top: 0, left: 0, width: "100%", height: "100%",
+        background: "rgba(0, 0, 0, 0.5)", display: "flex",
+        alignItems: "center", justifyContent: "center",
+        color: "white", fontSize: "20px", fontWeight: "bold",
+        zIndex: 1000
+    }}>
+        Loading data...
+    </div>
+);
+
+export default LoadingOverlay;

frontend/src/components/MapComponent.jsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
+import MarkerClusterGroup from "react-leaflet-markercluster";
+import L, { Icon } from "leaflet";
+import "leaflet/dist/leaflet.css";
+import "leaflet.markercluster/dist/MarkerCluster.css";
+import "leaflet.markercluster/dist/MarkerCluster.Default.css";
+
+import trainStationIconURL from "../assets/icons/train-station.png";
+import trainIconURL from "../assets/icons/train.png";
+
+// Fix Leaflet marker icon issue
+delete L.Icon.Default.prototype._getIconUrl;
+L.Icon.Default.mergeOptions({
+    iconUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png",
+    iconRetinaUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png",
+    shadowUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",
+});
+
+const icons = new Map([
+    ["IrishRailStation", new Icon({ iconUrl: trainStationIconURL, iconSize: [24, 24] })],
+    ["IrishRailTrain", new Icon({ iconUrl: trainIconURL, iconSize: [24, 24] })],
+]);
+
+const MapComponent = ({ markers, clusteringEnabled }) => {
+    return (
+        <MapContainer center={[53.4494762, -7.5029786]} zoom={7} minZoom={4} style={{ height: "100%", width: "100%" }}>
+            <TileLayer
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            />
+            {clusteringEnabled ? (
+                <MarkerClusterGroup>
+                    {markers.map(({ coords, popup, icon }, index) => (
+                        <Marker key={index} position={coords} icon={icons.get(icon)}>
+                            <Popup>{popup}</Popup>
+                        </Marker>
+                    ))}
+                </MarkerClusterGroup>
+            ) : (
+                markers.map(({ coords, popup, icon }, index) => (
+                    <Marker key={index} position={coords} icon={icons.get(icon)}>
+                        <Popup>{popup}</Popup>
+                    </Marker>
+                ))
+            )}
+        </MapContainer>
+    );
+};
+
+export default MapComponent;

frontend/src/components/Sidebar.jsx

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+
+const Sidebar = ({ selectedSources, setSelectedSources, clusteringEnabled, setClusteringEnabled, fetchData }) => {
+    const [isOpen, setIsOpen] = useState(true);
+    const dataSources = [
+        { id: "IrishRailTrains", name: "Irish Rail Trains" },
+        { id: "IrishRailStations", name: "Irish Rail Stations" },
+    ];
+
+    return (
+        <div style={{
+            position: "absolute", top: "10px", right: "10px",
+            width: "250px", minWidth: "50px",
+            padding: isOpen ? "10px" : "5px 10px", background: "rgba(255, 255, 255, 0.9)", color: "black",
+            borderRadius: "10px", transition: "height 0.2s ease-in-out, padding 0.2s ease-in-out",
+            height: isOpen ? "auto" : "40px", display: "flex", flexDirection: "column",
+            alignItems: "center", zIndex: 1000, overflow: "hidden", justifyContent: "center"
+        }}>
+            <button onClick={() => setIsOpen(!isOpen)} style={{
+                background: "none", border: "none", color: "black",
+                fontSize: "16px", cursor: "pointer", display: "flex",
+                alignItems: "center", width: "100%", justifyContent: "center",
+                padding: "8px 10px", fontWeight: "bold"
+            }}>
+                {isOpen ? "▼ Filters" : "▶ Filters"}
+            </button>
+            {isOpen && (
+                <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", width: "100%" }}>
+                    <h3>Select Data Sources</h3>
+                    {dataSources.map(({ id, name }) => (
+                        <div key={id} style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                            <input
+                                type="checkbox"
+                                id={id}
+                                checked={selectedSources.includes(id)}
+                                onChange={() =>
+                                    setSelectedSources((prev) => prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id])
+                                }
+                            />
+                            <label htmlFor={id}>{name}</label>
+                        </div>
+                    ))}
+                    <div style={{ marginTop: "10px", display: "flex", alignItems: "center", gap: "8px" }}>
+                        <input
+                            type="checkbox"
+                            id="toggleClustering"
+                            checked={clusteringEnabled}
+                            onChange={() => setClusteringEnabled(!clusteringEnabled)}
+                        />
+                        <label htmlFor="toggleClustering">Cluster overlapping icons</label>
+                    </div>
+                    <button onClick={fetchData} style={{ marginTop: "10px" }}>Submit</button>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default Sidebar;