Function ColorInput

apps/web/ui/ColorInput/index.tsx:13–36

({
  id,
  defaultValue,
  required,
  disabled = false,
  readOnly = false,
  onChange,
}: Props)

}

export default function ColorInput({
  id,
  defaultValue,
  required,
  disabled = false,
  readOnly = false,
  onChange,
}: Props) {
  return (
    <>
      <input
        type="color"
        id={id}
        className={styles.input}
        defaultValue={defaultValue}
        required={required}
        disabled={disabled}
        readOnly={readOnly}
        onChange={onChange}
      />
      <span className={styles.text}>Hex Color Code: {defaultValue}</span>
    </>
  );
}