Dropdown Menu

export function DropdownMenuDemo() {
  const [radioValue, setRadioValue] = useState<"Profile" | "Billing">(
    "Profile",
  );
  const [checkboxValues, setCheckboxValues] = useState<
    ("Profile" | "Billing")[]
  >(["Profile"]);
  const toggleCheckboxValue = (val: "Profile" | "Billing") => {
    if (checkboxValues.includes(val)) {
      setCheckboxValues(checkboxValues.filter((x) => x !== val));
    } else {
      setCheckboxValues([...checkboxValues, val]);
    }
  };
  const isChecked = (val: "Profile" | "Billing") =>
    checkboxValues.includes(val);

  const baseGroup = {
    label: "Base",
    type: "base" as const,
    items: [
      {
        label: "Profile",
        id: "Profile",
        icon: (
          <UserIcon className="mr-2 h-4 w-4 fill-noir-600 dark:fill-noir-100" />
        ),
        aside: "⇧⌘P",
      },
      {
        label: "Billing",
        id: "Billing",
        icon: (
          <CartIcon className="mr-2 h-4 w-4 fill-noir-600 dark:fill-noir-100" />
        ),
        aside: "⌘B",
      },
    ],
  };
  const checkboxGroup = {
    label: "Radio",
    type: "checkbox" as const,
    items: [
      {
        label: "Profile",
        id: "Profile",
        icon: (
          <UserIcon className="mr-2 h-4 w-4 fill-noir-600 dark:fill-noir-100" />
        ),
        aside: "⇧⌘P",
        checked: isChecked("Profile"),
        onCheckedChange: () => toggleCheckboxValue("Profile"),
      },
      {
        label: "Billing",
        id: "Billing",
        icon: (
          <CartIcon className=" mr-2 h-4 w-4 fill-noir-600 dark:fill-noir-100" />
        ),
        aside: "⌘B",
        checked: isChecked("Billing"),
        onCheckedChange: () => toggleCheckboxValue("Billing"),
      },
    ],
  };
  const radioGroup = {
    label: "Checkbox",
    type: "radio" as const,
    value: radioValue,
    onValueChange: setRadioValue,
    items: [
      {
        label: "Profile",
        id: "Profile",
        icon: (
          <UserIcon className="mr-2 h-4 w-4 fill-noir-600 dark:fill-noir-100" />
        ),
        aside: "⇧⌘P",
      },
      {
        label: "Billing",
        id: "Billing",
        icon: (
          <CartIcon className=" mr-2 h-4 w-4 fill-noir-600 dark:fill-noir-100" />
        ),
        aside: "⌘B",
      },
    ],
  };
  return (
    <Dropdown
      groups={[baseGroup, checkboxGroup, radioGroup]}
      menuLabel="Example Dropdown Menu"
      buttonLabel="Open"
    />
  );
}

Was this page helpful?