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"
/>
);
}