tabler/shared/components/cards/UsersListHeaders.astro

---
import Avatar from '@ui/Avatar.astro'
import { people } from '@shared/lib/people'
import ListGroup from '@ui/ListGroup.astro'
import ListGroupItem from '@ui/ListGroupItem.astro'
import ListGroupHeader from '@ui/ListGroupHeader.astro'
import CardTitle from '@ui/CardTitle.astro'
import commits from '@data/commits.json'
import { sortBy } from '@shared/lib/string-format'

const title = 'People'

const commitList = commits as { description: string }[]

// Sort by last_name (case-sensitive).
const sorted = sortBy(people, (p) => p.last_name ?? '')

let prevLetter = ''
const rows = sorted.map((person, idx) => {
  const index = idx + 1
  const firstLetter = (person.last_name ?? '').slice(0, 1)
  let header: string | null = null
  if (prevLetter !== firstLetter) {
    prevLetter = firstLetter
    header = firstLetter
  }
  return { person, header, description: commitList[index]?.description }
})
---

<div class="card">
  <div class="card-header">
    <CardTitle>{title}</CardTitle>
  </div>

  <ListGroup flush class="overflow-auto" style="max-height: 35rem">
    {
      rows.map((row) => (
        <>
          {row.header && <ListGroupHeader class="sticky-top">{row.header}</ListGroupHeader>}
          <ListGroupItem>
            <div class="row">
              <div class="col-auto">
                <a href="#" tabindex="-1" aria-hidden="true">
                  <Avatar person={row.person} />
                </a>
              </div>
              <div class="col text-truncate">
                <a href="#" class="text-body d-block">
                  {row.person.full_name}
                </a>
                <div class="text-secondary text-truncate mt-n1">{row.description}</div>
              </div>
            </div>
          </ListGroupItem>
        </>
      ))
    }
  </ListGroup>
</div>