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'

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

interface Props {
  limit?: number
  offset?: number
  title?: string
  class?: string
}

const { limit = 10, offset = 0, title = 'Top users', class: className } = Astro.props

const colors = 'green,red,yellow,x,x'.split(',')
const statusLabels: Record<string, 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 = 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>