mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 13:21:29 +04:00
codecalm
f27c70ad38
`Render Modal as real markup` (#2742) reformatted ~140 files back to tabs/semicolons, breaking the Prettier config added by the Astro quality gates (#2749). Re-run prettier --write to restore it, and fix the type errors it had been masking: HTMLElement casts and `this` typing in ChangePasswordModalContent/ConfirmDeleteModalContent scripts, plain-JS syntax in the inline-injected progress.astro script, narrowed prop unions in Button/Check/Spinner, nullable icon svg casts in Icons/Rating, and a duplicate firstLetters/invalid `placeholder` attribute in Select.astro. Also fix shared/vitest.config.mts's stale `astro/lib/**/*.test.ts` include glob left over from the shared source restructure, which made `pnpm test` report zero test files.
58 lines
1.9 KiB
Plaintext
58 lines
1.9 KiB
Plaintext
---
|
|
// progress and online_counter assigned per person but never rendered — omitted.
|
|
// rounded=true on avatar has no effect — Avatar has no `rounded` prop.
|
|
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
|
|
import Avatar from '@ui/Avatar.astro'
|
|
import Card from '@ui/Card.astro'
|
|
import CardBody from '@ui/CardBody.astro'
|
|
import Icon from '@ui/Icon.astro'
|
|
import Pagination from '@ui/Pagination.astro'
|
|
import people from '@data/people.json'
|
|
|
|
interface Person {
|
|
full_name?: string
|
|
job_title?: string
|
|
photo?: string
|
|
[key: string]: unknown
|
|
}
|
|
|
|
const users = (people as Person[]).slice(0, 18)
|
|
---
|
|
|
|
<DefaultLayout title="Users list" pageHeader="Users" actions="users" description="1-18 of 413 people" pageMenu="extra.users">
|
|
<div class="row row-cards">
|
|
{
|
|
users.map((person, idx) => {
|
|
const index = idx + 1
|
|
return (
|
|
<div class="col-md-6 col-lg-3">
|
|
<Card>
|
|
<CardBody class="p-4 text-center">
|
|
<Avatar size="xl" person={person} class="mb-3" />
|
|
<h3 class="m-0 mb-1">
|
|
<a href="#">{person.full_name}</a>
|
|
</h3>
|
|
<div class="text-secondary">{person.job_title}</div>
|
|
|
|
<div class="mt-3">{index === 1 ? <span class="badge bg-purple-lt">Owner</span> : index < 5 ? <span class="badge bg-green-lt">Admin</span> : null}</div>
|
|
</CardBody>
|
|
<div class="d-flex">
|
|
<a href="#" class="card-btn">
|
|
<Icon name="mail" color="muted" class="me-2" /> Email
|
|
</a>
|
|
<a href="#" class="card-btn">
|
|
<Icon name="phone" color="muted" class="me-2" /> Call
|
|
</a>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
|
|
<div class="d-flex mt-4">
|
|
<Pagination class="ms-auto" />
|
|
</div>
|
|
</DefaultLayout>
|