tabler/shared/components/cards/UserCard.astro

---
// person = people[person-id] (no -1: the object is passed straight to Avatar).
import Avatar from '@ui/Avatar.astro'
import people from '@data/people.json'

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

interface Props {
  personId?: number
  right?: boolean
}

const { personId = 0, right } = Astro.props
const person = (people as Person[])[personId]
---

<a class="card card-link" href="#">
  <div class="card-body">
    <div class="row">
      {
        !right && (
          <div class="col-auto">
            <Avatar person={person} class="rounded" />
          </div>
        )
      }
      <div class="col">
        <div class="fw-medium">{person.full_name}</div>
        <div class="text-secondary">{person.job_title}</div>
      </div>
      {
        right && (
          <div class="col-auto">
            <Avatar person={person} class="rounded" />
          </div>
        )
      }
    </div>
  </div>
</a>