tabler/shared/ui/InputGroup.astro

---
import Icon from './Icon.astro'

interface Props {
  type?: astroHTML.JSX.HTMLInputTypeAttribute
  placeholder?: string
  value?: string
  flat?: boolean
  class?: string
  inputClass?: string
  id?: string
  prepend?: string
  append?: string
  appendButton?: { icon: string; description: string }[]
}

const { type = 'text', placeholder, value, flat, class: className, inputClass, id, prepend, append, appendButton } = Astro.props

const appendButtons = appendButton ?? []
---

<div class:list={['input-group', flat && 'input-group-flat', className]}>
  {prepend && <span class="input-group-text">{prepend}</span>}
  <input type={type} class:list={['form-control', inputClass]} placeholder={placeholder} value={value} autocomplete="off" id={id} />
  {append && <span class="input-group-text">{append}</span>}
  {
    appendButtons.length > 0 && (
      <span class="input-group-text">
        {appendButtons.map(({ icon, description }, index) => (
          <a href="#" class:list={['link-secondary', index > 0 && 'ms-2']} title={description} data-bs-toggle="tooltip">
            <Icon name={icon} />
          </a>
        ))}
      </span>
    )
  }
</div>