1function Button(Props) {
2  const { children, onClick } = Props;
3
4  return (
5    <button
6      onClick={onClick}
7      type="button"
8      data-input-counter-increment="counter-input"
9      className="flex-shrink-0  bg-gray-700 hover:bg-gray-600 border-gray-600 inline-flex items-center justify-center border rounded-md h-5 w-5  focus:ring-gray-700 focus:ring-2 focus:outline-none"
10    >
11      {children}
12    </button>
13  );
14}
15export default function NumberInput(Props) {
16  const { value = 0, setValue, max, min } = Props;
17
18  return (
19    <div className="relative flex items-center">
20      <Button onClick={() => setValue(value - 1)}>
21        <svg
22          className="w-2.5 h-2.5 text-white"
23          aria-hidden="true"
24          xmlns="http://www.w3.org/2000/svg"
25          fill="none"
26          viewBox="0 0 18 2"
27        >
28          <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 1h16" />
29        </svg>
30      </Button>
31      <input
32        min={min}
33        max={max}
34        type="text"
35        data-input-counter
36        className="flex-shrink-0 text-white border-0 bg-transparent text-sm font-normal focus:outline-none focus:ring-0 max-w-[2.5rem] text-center"
37        placeholder=""
38        value={value}
39        onChange={(e) => setValue(e.target.value)}
40      />
41      <Button onClick={() => setValue(value + 1)}>
42        <svg
43          className="w-2.5 h-2.5 text-white"
44          aria-hidden="true"
45          xmlns="http://www.w3.org/2000/svg"
46          fill="none"
47          viewBox="0 0 18 18"
48        >
49          <path strokeLinecap="round" stroke="currentColor" strokeLinejoin="round" strokeWidth="2" d="M9 1v16M1 9h16" />
50        </svg>
51      </Button>
52    </div>
53  );
54}