map layer management

2026-04-07 23:32:38 +07:00
parent 2a1b4f2f2a
commit 5ac5c4c0af
10 changed files with 514 additions and 45 deletions
--- a/components/BackgroundLayersPanel.tsx
+++ b/components/BackgroundLayersPanel.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import {
+    BACKGROUND_LAYER_OPTIONS,
+    BackgroundLayerId,
+    BackgroundLayerVisibility,
+} from "@/lib/backgroundLayers";
+
+type Props = {
+    visibility: BackgroundLayerVisibility;
+    onToggleLayer: (id: BackgroundLayerId) => void;
+    onShowAll: () => void;
+    onHideAll: () => void;
+};
+
+export default function BackgroundLayersPanel({
+    visibility,
+    onToggleLayer,
+    onShowAll,
+    onHideAll,
+}: Props) {
+    return (
+        <aside
+            style={{
+                width: "240px",
+                background: "#111827",
+                color: "#e5e7eb",
+                borderLeft: "1px solid #1f2937",
+                padding: "12px",
+                height: "100vh",
+                overflowY: "auto",
+            }}
+        >
+            <h3 style={{ margin: 0, marginBottom: "10px" }}>Map Layers</h3>
+
+            <div style={{ display: "flex", gap: "8px", marginBottom: "12px" }}>
+                <button
+                    onClick={onShowAll}
+                    style={{
+                        flex: 1,
+                        border: "none",
+                        borderRadius: "6px",
+                        padding: "6px 8px",
+                        cursor: "pointer",
+                        background: "#374151",
+                        color: "#f9fafb",
+                    }}
+                >
+                    Bật hết
+                </button>
+                <button
+                    onClick={onHideAll}
+                    style={{
+                        flex: 1,
+                        border: "none",
+                        borderRadius: "6px",
+                        padding: "6px 8px",
+                        cursor: "pointer",
+                        background: "#1f2937",
+                        color: "#f9fafb",
+                    }}
+                >
+                    Tắt hết
+                </button>
+            </div>
+
+            <div style={{ display: "grid", gap: "8px" }}>
+                {BACKGROUND_LAYER_OPTIONS.map((layer) => (
+                    <label
+                        key={layer.id}
+                        style={{
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "8px",
+                            fontSize: "14px",
+                            cursor: "pointer",
+                        }}
+                    >
+                        <input
+                            type="checkbox"
+                            checked={visibility[layer.id]}
+                            onChange={() => onToggleLayer(layer.id)}
+                        />
+                        <span>{layer.label}</span>
+                    </label>
+                ))}
+            </div>
+        </aside>
+    );
+}