Spaces:
Build error
Build error
File size: 1,673 Bytes
b59aa07 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
import { cn } from "#/utils/utils";
import { OptionalTag } from "./optional-tag";
interface SettingsInputProps {
testId?: string;
name?: string;
label: string;
type: React.HTMLInputTypeAttribute;
defaultValue?: string;
value?: string;
placeholder?: string;
showOptionalTag?: boolean;
isDisabled?: boolean;
startContent?: React.ReactNode;
className?: string;
onChange?: (value: string) => void;
required?: boolean;
min?: number;
max?: number;
step?: number;
pattern?: string;
}
export function SettingsInput({
testId,
name,
label,
type,
defaultValue,
value,
placeholder,
showOptionalTag,
isDisabled,
startContent,
className,
onChange,
required,
min,
max,
step,
pattern,
}: SettingsInputProps) {
return (
<label className={cn("flex flex-col gap-2.5 w-fit", className)}>
<div className="flex items-center gap-2">
{startContent}
<span className="text-sm">{label}</span>
{showOptionalTag && <OptionalTag />}
</div>
<input
data-testid={testId}
onChange={(e) => onChange && onChange(e.target.value)}
name={name}
disabled={isDisabled}
type={type}
defaultValue={defaultValue}
value={value}
placeholder={placeholder}
min={min}
max={max}
step={step}
required={required}
pattern={pattern}
className={cn(
"bg-tertiary border border-[#717888] h-10 w-full rounded p-2 placeholder:italic placeholder:text-tertiary-alt",
"disabled:bg-[#2D2F36] disabled:border-[#2D2F36] disabled:cursor-not-allowed",
)}
/>
</label>
);
}
|