src/components/Field.tsx


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

import * as React from 'react';

import s from './Field.module.scss';

const { useCallback } = React;

type Props = {
  name: string;
  value?: string | number;
  type?: 'text' | 'number';
  onChange?: (...args: any[]) => any;
  id?: string;
  label?: string;
  placeholder?: string;
};

export default function Field({ id, label, value, onChange, ...props }: Props) {
  const valueOnChange = useCallback((e) => onChange(e), [onChange]);
  return (
    <div className={s.root}>
      <input id={id} value={value} onChange={valueOnChange} {...props} />
      <label htmlFor={id} className={s.floatAbove}>
        {label}
      </label>
    </div>
  );
}