File size: 1,525 Bytes
aa2e6af | 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 | import { forwardRef } from 'react';
import type { ChangeEvent, FC, Ref } from 'react';
import { cn, defaultTextPropsLabel, removeFocusOutlines, defaultTextProps } from '~/utils/';
import { Input, Label } from '~/components/ui';
import { useLocalize } from '~/hooks';
interface InputWithLabelProps {
id: string;
value: string;
label: string;
subLabel?: string;
onChange: (event: ChangeEvent<HTMLInputElement>) => void;
labelClassName?: string;
inputClassName?: string;
ref?: Ref<HTMLInputElement>;
}
const InputWithLabel: FC<InputWithLabelProps> = forwardRef((props, ref) => {
const { id, value, label, subLabel, onChange, labelClassName = '', inputClassName = '' } = props;
const localize = useLocalize();
return (
<>
<div className={cn('flex flex-row', labelClassName)}>
<Label htmlFor={id} className="text-left text-sm font-medium">
{label}
</Label>
{subLabel && (
<div className="mx-1 text-left text-sm text-gray-700 dark:text-gray-400">{subLabel}</div>
)}
<br />
</div>
<Input
id={id}
data-testid={`input-${id}`}
value={value ?? ''}
onChange={onChange}
ref={ref}
placeholder={`${localize('com_endpoint_config_value')} ${label}`}
className={cn(
defaultTextProps,
'flex h-10 max-h-10 w-full resize-none px-3 py-2',
removeFocusOutlines,
inputClassName,
)}
/>
</>
);
});
export default InputWithLabel;
|