tabler/shared/ui/Avatar.astro

---
import Icon from './Icon.astro'
import people from '@data/people.json'
import { firstLetters } from '@shared/lib/string-format'

interface Person {
  full_name?: string
  photo?: string
  [key: string]: unknown
}

interface Props {
  src?: string
  placeholder?: string
  personId?: number
  person?: Person
  link?: boolean
  dropdown?: boolean
  size?: string
  thumb?: boolean
  class?: string
  shape?: string
  color?: string
  square?: boolean
  status?: string
  statusText?: string
  statusIcon?: string
  statusLabel?: string
  brand?: string
  icon?: string
  /** asset URL base — '.' for root-level pages, '..' for pages one level deep (e.g. marketing/) */
  base?: string
  /** remaining attributes (data-bs-toggle for tooltips, aria-*, …) are forwarded to the element */
  [key: string]: unknown
}

const { src: srcProp, placeholder: placeholderProp, personId, person: personProp, link: linkProp = false, dropdown, size, thumb, class: className, shape, color, square, status, statusText, statusIcon, statusLabel, brand, icon, base = '.', ...rest } = Astro.props

let src = srcProp
let placeholder = placeholderProp

const person = personId ? (people as Person[])[personId - 1] : personProp
if (person) {
  src = person.photo
  if (!src) {
    placeholder = firstLetters(person.full_name ?? '')
  }
}

const link = linkProp || Boolean(dropdown)
const El = link ? 'a' : 'span'

const classes = ['avatar', size && `avatar-${size}`, thumb && 'avatar-thumb', className, shape && `avatar-${shape}`, color && `bg-${color}-lt`, square && 'avatar-square']
---

<El class:list={classes} style={src ? `background-image: url(${base}/${src})` : undefined} data-bs-toggle={dropdown ? 'dropdown' : undefined} {...rest}
  >{status && <span class={`badge bg-${status}`}>{statusText ? statusText : statusIcon ? <Icon name={statusIcon} class="avatar-status-icon" /> : <span class="visually-hidden">{statusLabel ?? status}</span>}</span>}{
    brand && <span class="avatar-brand" style={`background-image: url(${base}/static/brands/${brand}.svg);`} />
  }{src ? null : placeholder ? placeholder : icon ? <Icon name={icon} class="avatar-icon" /> : <Icon name="user" class="avatar-icon" />}</El
>