shared/components/cards/UsersListHeaders.astro - dev - githubmirror/tabler

shared/components/cards/UsersListHeaders.astro

68 строк2 KB

Paweł Kuna

Narrow component prop types, remove unused props and dead code (#2838)

10 авг 2026, 00:14

10 авг 2026, 00:144f7beec

---
import Avatar from '@ui/Avatar.astro'
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 people from '@data/people.json'
import commits from '@data/commits.json'
import { sortBy } from '@shared/lib/string-format'

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

const title = 'People'

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

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

// offset is unset in the include, so `forloop.index | plus: offset` == forloop.index.
let prevLetter = ''
const rows = sorted.map((person, idx) => {
  const index = idx + 1 // forloop.index (1-based)
  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="#">
                  <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>