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
}

/** core/scss/_variables.scss `$avatar-sizes` map keys */
export type AvatarSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'

interface Props {
  src?: string
  placeholder?: string | undefined
  personId?: number
  person?: Person | undefined
  link?: boolean
  size?: AvatarSize | undefined
  thumb?: boolean
  class?: string
  shape?: string
  color?: string | undefined
  square?: boolean
  status?: string
  statusLabel?: string
  brand?: string
  icon?: string | undefined
  /** 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, size, thumb, class: className, shape, color, square, status, 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 El = linkProp ? '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} {...rest}
  >{status && <span class={`badge bg-${status}`} aria-label={statusLabel ?? status} />}{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
>