samling 0.13.1

App for managing apparel collections
Documentation 
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
52
53
54

import { Dispatch, SetStateAction } from "react";
import { classNames } from "../../utils";

interface InputProps {
  id: string;
  placeholder?: string;
  title: string;
  description?: string | null;
  value: string;
  setValue: Dispatch<SetStateAction<string>>;
  required: boolean;
  type?: string;
  disabled?: boolean;
}

export default function Input({
  id,
  placeholder,
  title,
  description,
  value,
  setValue,
  required,
  type,
  disabled,
}: InputProps) {
  return (
    <>
      <label htmlFor={id} className="block text-sm font-medium text-gray-700">
        {title}
      </label>
      <div className="mt-2">
        <input
          type={type || "text"}
          name={id}
          id={id}
          value={value}
          required={disabled ? false : required}
          onChange={(e) => setValue(e.target.value)}
          disabled={disabled}
          className={classNames(
            disabled ? "bg-gray-100" : "",
            "block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
          )}
          placeholder={placeholder}
          aria-describedby={`${id}-description`}
        />
      </div>
      <p className="mt-2 text-sm text-gray-500" id={`${id}-description`}>
        {description}
      </p>
    </>
  );
}