Array Field

import React, { useState } from 'react'
import { Field, ArrayField, Input } from '@otfdashkit/ui'

function ArrayFieldDemo() {
  const [items, setItems] = useState([''])
  return (
    <div className="max-w-sm">
      <Field label="Email addresses">
        <ArrayField
          value={items}
          onChange={setItems}
          defaultItem=""
          addLabel="Add email"
          maxItems={5}
          renderItem={(item, index, remove) => (
            <Input
              value={item}
              placeholder={`Email ${index + 1}`}
              onChange={e => {
                const next = [...items]
                next[index] = e.target.value
                setItems(next)
              }}
              onKeyDown={e => e.key === 'Backspace' && item === '' && remove()}
            />
          )}
        />
      </Field>
    </div>
  )
}

export function Example() {
  return (
    <ArrayFieldDemo />
  )
}