35 lines
850 B
TypeScript
35 lines
850 B
TypeScript
|
import * as React from 'react';
|
||
|
|
import * as styles from './LabeledInput.scss';
|
||
|
|
import { Inline } from './Typography';
|
||
|
|
|
||
|
|
export type Props = {
|
||
|
|
children: React.ReactNode;
|
||
|
|
placeholder?: string;
|
||
|
|
value?: string;
|
||
|
|
onChange?: (value: string) => unknown;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const LabeledInput = React.memo(
|
||
|
|
({ children, value, placeholder, onChange }: Props) => {
|
||
|
|
const handleChange = React.useCallback(
|
||
|
|
(e: React.ChangeEvent<HTMLInputElement>) => {
|
||
|
|
onChange(e.currentTarget.value);
|
||
|
|
},
|
||
|
|
[onChange]
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<label className={styles.container}>
|
||
|
|
<Inline className={styles.label}>{children}</Inline>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
className={styles.input}
|
||
|
|
placeholder={placeholder}
|
||
|
|
value={value}
|
||
|
|
onChange={handleChange}
|
||
|
|
/>
|
||
|
|
</label>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
);
|