50 lines
1,017 B
TypeScript
50 lines
1,017 B
TypeScript
import style from './labeled-input.module.css';
|
|
|
|
export default function LabeledInput({
|
|
type,
|
|
width,
|
|
label,
|
|
placeholder,
|
|
value,
|
|
}: {
|
|
type: 'text' | 'email' | 'password';
|
|
width?: number;
|
|
label?: string;
|
|
placeholder?: string;
|
|
value?: string;
|
|
}) {
|
|
const randomId = Math.random().toString(36).substring(2, 15);
|
|
|
|
if (!label) {
|
|
return (
|
|
<div className={style.input}>
|
|
<input
|
|
type={type}
|
|
placeholder={placeholder}
|
|
defaultValue={value}
|
|
style={{
|
|
width: width ? `${width}px` : '100%',
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<div className={style.input}>
|
|
<label htmlFor={randomId} className={style['label']}>
|
|
{label}
|
|
</label>
|
|
|
|
<input
|
|
id={randomId}
|
|
type={type}
|
|
placeholder={placeholder}
|
|
defaultValue={value}
|
|
style={{
|
|
width: width ? `${width}px` : '100%',
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
}
|