OAuth 2 (#158)

src-web/components/core/Select.tsx

@@ -23,12 +23,14 @@ export interface SelectProps<T extends string> {
   size?: ButtonProps['size'];
   className?: string;
   event?: string;
+  disabled?: boolean;
 }
 
 export function Select<T extends string>({
   labelPosition = 'top',
   name,
   labelClassName,
+  disabled,
   hideLabel,
   label,
   value,
@@ -72,7 +74,8 @@ export function Select<T extends string>({
             'w-full rounded-md text text-sm font-mono',
             'pl-2',
             'border',
-            focused ? 'border-border-focus' : 'border-border',
+            focused && !disabled ? 'border-border-focus' : 'border-border',
+            disabled && 'border-dotted',
             isInvalidSelection && 'border-danger',
             size === 'xs' && 'h-xs',
             size === 'sm' && 'h-sm',
@@ -86,7 +89,8 @@ export function Select<T extends string>({
             onChange={(e) => handleChange(e.target.value as T)}
             onFocus={() => setFocused(true)}
             onBlur={() => setFocused(false)}
-            className={classNames('pr-7 w-full outline-none bg-transparent')}
+            className={classNames('pr-7 w-full outline-none bg-transparent disabled:opacity-disabled')}
+            disabled={disabled}
           >
             {isInvalidSelection && <option value={'__NONE__'}>-- Select an Option --</option>}
             {options.map((o) => {
@@ -109,6 +113,7 @@ export function Select<T extends string>({
             variant="border"
             size={size}
             leftSlot={leftSlot}
+            disabled={disabled}
             forDropdown
           >
             {options.find((o) => o.type !== 'separator' && o.value === value)?.label ?? '--'}