レイヤーのメニューLayerMenuExperimental

"use client";

import * as React from "react";
import { LayerMenu, type LayerMenuGroup } from "@gunjo/ui";
import { IconEye } from "@tabler/icons-react";

const GROUPS: LayerMenuGroup[] = [
  {
    id: "weather",
    label: "天気",
    items: [
      { id: "cloud", label: "雲" },
      // 使えないあいだは理由を一言。状態はそのまま残ります
      { id: "rain", label: "雨", disabledReason: "もっと拡大すると使えます" },
      { id: "night", label: "夜景", note: "夜側の街明かり" },
    ],
  },
  {
    id: "map",
    label: "地図",
    items: [{ id: "border", label: "国境・県境" }],
  },
];

export function MapLayers() {
  const [value, setValue] = React.useState(["cloud", "night", "border"]);

  return (
    <LayerMenu
      groups={GROUPS}
      value={value}
      onValueChange={setValue}
      icon={<IconEye />}
      // 長押しで何が起きるかも、名前に書いておきます
      label="重ねるものを選ぶ（長押しでまとめて消す）"
      allLabel="すべて"
      onLongPress={() => navigator.vibrate?.(10)}
    />
  );
}