in src/components/toggle.tsx [61:99]
export function ToggleState({ state, setState }) {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="w-[120px] justify-between">
<div className="flex items-center">
{React.createElement(
states.find((s) => s.value === state)
?.icon as React.ComponentType<{ className?: string }>,
{
className: "mr-2 h-4 w-4",
}
)}
{states.find((s) => s.value === state)?.label}
</div>
<ChevronDown className="ml-auto h-4 w-4 shrink-0 opacity-50" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-[120px]">
{states.map((stateOption) => (
<DropdownMenuItem
disabled={stateOption.disabled}
key={stateOption.value}
onClick={() => setState(stateOption.value)}
>
<stateOption.icon className="mr-2 h-4 w-4" />
<span>{stateOption.label}</span>
<Check
className={cn(
"ml-auto h-4 w-4",
stateOption.value === state ? "opacity-100" : "opacity-0"
)}
/>
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
);
}