export function ToggleState()

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