46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { ToggleButton } from '@wing/ui';
|
|
|
|
export type MapToggleState = {
|
|
pairLines: boolean;
|
|
pairRange: boolean;
|
|
fcLines: boolean;
|
|
zones: boolean;
|
|
fleetCircles: boolean;
|
|
predictVectors: boolean;
|
|
shipLabels: boolean;
|
|
subcables: 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: "fleetCircles", label: "선단 범위" },
|
|
{ id: "zones", label: "수역 표시" },
|
|
{ id: "predictVectors", label: "예측 벡터" },
|
|
{ id: "shipLabels", label: "선박명 표시" },
|
|
{ id: "subcables", label: "해저케이블" },
|
|
];
|
|
|
|
return (
|
|
<div className="flex flex-wrap gap-1">
|
|
{items.map((t) => (
|
|
<ToggleButton
|
|
key={t.id}
|
|
on={value[t.id]}
|
|
onClick={() => onToggle(t.id)}
|
|
className="flex-[1_1_calc(25%-4px)] overflow-hidden text-center text-ellipsis whitespace-nowrap"
|
|
>
|
|
{t.label}
|
|
</ToggleButton>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|