33 lines
847 B
TypeScript
33 lines
847 B
TypeScript
|
export type MapToggleState = {
|
||
|
|
pairLines: boolean;
|
||
|
|
pairRange: boolean;
|
||
|
|
fcLines: boolean;
|
||
|
|
zones: boolean;
|
||
|
|
fleetCircles: boolean;
|
||
|
|
};
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
value: MapToggleState;
|
||
|
|
onToggle: (key: keyof MapToggleState) => void;
|
||
|
|
};
|
||
|
|
|
||
|
|
export function MapToggles({ value, onToggle }: Props) {
|
||
|
|
const items: Array<{ id: keyof MapToggleState; label: string }> = [
|
||
|
|
{ id: "pairLines", label: "쌍 연결선" },
|
||
|
|
{ id: "pairRange", label: "쌍 연결범위" },
|
||
|
|
{ id: "fcLines", label: "환적 연결선" },
|
||
|
|
{ id: "zones", label: "수역 표시" },
|
||
|
|
{ id: "fleetCircles", label: "선단 범위" },
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="tog">
|
||
|
|
{items.map((t) => (
|
||
|
|
<div key={t.id} className={`tog-btn ${value[t.id] ? "on" : ""}`} onClick={() => onToggle(t.id)}>
|
||
|
|
{t.label}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|