Fix: Improve disabled Select

This commit is contained in:
Daniel Hougaard
2024-05-07 17:30:27 +02:00
parent 7fd1d72985
commit 1f68730aa3
+11 -7
View File
@@ -41,18 +41,22 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
ref={ref} ref={ref}
className={twMerge( className={twMerge(
`inline-flex items-center justify-between rounded-md `inline-flex items-center justify-between rounded-md
bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200 focus:bg-mineshaft-700/80`, bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none focus:bg-mineshaft-700/80 data-[placeholder]:text-mineshaft-200`,
className className,
isDisabled && "cursor-not-allowed opacity-50"
)} )}
> >
<SelectPrimitive.Value placeholder={placeholder}> <SelectPrimitive.Value placeholder={placeholder}>
{props.icon ? <FontAwesomeIcon icon={props.icon} /> : placeholder} {props.icon ? <FontAwesomeIcon icon={props.icon} /> : placeholder}
</SelectPrimitive.Value> </SelectPrimitive.Value>
{!isDisabled && (
<SelectPrimitive.Icon className="ml-3"> <SelectPrimitive.Icon className="ml-3">
<FontAwesomeIcon icon={faCaretDown} size="sm" /> <FontAwesomeIcon
</SelectPrimitive.Icon> icon={faCaretDown}
)} size="sm"
className={twMerge(isDisabled && "opacity-30")}
/>
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger> </SelectPrimitive.Trigger>
<SelectPrimitive.Portal> <SelectPrimitive.Portal>
<SelectPrimitive.Content <SelectPrimitive.Content