Function Select

packages/shared/src/components/fields/Select.tsx:23–75

({
  name,
  options,
  placeholder,
  icon,
  buttonProps,
  onSelect,
}: SelectProps)

};

const Select = ({
  name,
  options,
  placeholder,
  icon,
  buttonProps,
  onSelect,
}: SelectProps) => {
  const { control, setValue } = useFormContext();

  const menuItems: MenuItemProps[] = options.map((opt) => {
    return {
      label: opt.label,
      action: () => {
        setValue(name, opt.value);
        onSelect?.(opt.value);
      },
    };
  });

  return (
    <Controller
      name={name}
      control={control}
      render={({ field }) => (
        <>
          <input type="hidden" {...field} />
          <DropdownMenu>
            <DropdownMenuTrigger className="w-full" asChild>
              <Button
                icon={icon}
                variant={ButtonVariant.Float}
                {...buttonProps}
              >
                {options.find((opt) => opt.value === field.value?.toString())
                  ?.label || placeholder}
                <ArrowIcon className="ml-auto rotate-180" secondary />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent
              variant="field"
              align="start"
              sideOffset={10}
              className="flex flex-col gap-1 !p-0"
            >
              <DropdownMenuOptions options={menuItems} />
            </DropdownMenuContent>
          </DropdownMenu>
        </>
      )}
    />
  );
};

export default Select;