tabler/shared/components/cards/UsersList2.astro

---
import Avatar from '@ui/Avatar.astro'
import CardTitle from '@ui/CardTitle.astro'
import people from '@data/people.json'
import { randomNumber, timeagoLabel } from '@shared/lib/pseudo-random'
import { requireIndex } from '@shared/lib/array'

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

interface Props {
  class?: string
}

const { class: className } = Astro.props

const limit = 10
const offset = 0
const title = 'Top users'

const colors = ['green', 'red', 'yellow', 'x', 'x'] as const
const statusLabels: Record<(typeof colors)[number], string> = { green: 'Online', red: 'Busy', yellow: 'Away', x: 'Offline' }

const rows = (people as Person[]).slice(offset, offset + limit).map((person, idx) => {
  const index = idx + 1 // forloop.index (1-based)
  const status = requireIndex(colors, randomNumber(index + 5, 0, colors.length - 1))
  return {
    person,
    status: status !== 'x' ? status : 'secondary',
    statusLabel: statusLabels[status],
    timeago: timeagoLabel(index, 6),
  }
})
---

<div class={`card${className ? ` ${className}` : ''}`}>
  <div class="card-header">
    <CardTitle>{title}</CardTitle>
  </div>
  <div class="card-body">
    <div class="row g-3">
      {
        rows.map((row) => (
          <div class="col-6">
            <div class="row g-3 align-items-center">
              <a href="#" class="col-auto">
                <Avatar person={row.person} status={row.status} statusLabel={row.statusLabel} />
              </a>
              <div class="col text-truncate">
                <a href="#" class="text-reset d-block text-truncate">
                  {row.person.full_name}
                </a>
                <div class="text-secondary text-truncate mt-n1">{row.timeago}</div>
              </div>
            </div>
          </div>
        ))
      }
    </div>
  </div>
</div>