75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { ReactNode } from "react";
|
|
import {
|
|
BACKGROUND_LAYER_OPTIONS,
|
|
BackgroundLayerId,
|
|
BackgroundLayerVisibility,
|
|
} from "@/uhm/lib/backgroundLayers";
|
|
|
|
type Props = {
|
|
visibility: BackgroundLayerVisibility;
|
|
onToggleLayer: (id: BackgroundLayerId) => void;
|
|
onShowAll: () => void;
|
|
onHideAll: () => void;
|
|
topContent?: ReactNode;
|
|
width?: number;
|
|
};
|
|
|
|
export default function BackgroundLayersPanel({
|
|
visibility,
|
|
onToggleLayer,
|
|
onShowAll,
|
|
onHideAll,
|
|
topContent,
|
|
width = 240,
|
|
}: Props) {
|
|
return (
|
|
<aside
|
|
style={{
|
|
width,
|
|
background: "#111827",
|
|
color: "#e5e7eb",
|
|
borderLeft: "1px solid #1f2937",
|
|
padding: "12px",
|
|
height: "100vh",
|
|
overflowY: "auto",
|
|
}}
|
|
>
|
|
{topContent ? <div style={{ marginBottom: "12px" }}>{topContent}</div> : null}
|
|
|
|
<h3 style={{ margin: 0, marginBottom: "10px" }}>Map Layers</h3>
|
|
|
|
<div style={{ display: "flex", flexWrap: "wrap", gap: "10px 12px" }}>
|
|
{BACKGROUND_LAYER_OPTIONS.map((layer) => {
|
|
const on = Boolean(visibility[layer.id]);
|
|
return (
|
|
<button
|
|
key={layer.id}
|
|
type="button"
|
|
onClick={() => onToggleLayer(layer.id)}
|
|
style={{
|
|
border: "none",
|
|
background: "transparent",
|
|
padding: 0,
|
|
margin: 0,
|
|
cursor: "pointer",
|
|
color: on ? "#22c55e" : "#e5e7eb",
|
|
textDecorationLine: on ? "none" : "line-through",
|
|
textDecorationThickness: on ? undefined : "2px",
|
|
textDecorationColor: on ? undefined : "rgba(148, 163, 184, 0.7)",
|
|
fontSize: 13,
|
|
fontWeight: 750,
|
|
whiteSpace: "nowrap",
|
|
}}
|
|
title={on ? "On" : "Off"}
|
|
>
|
|
{layer.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|