tabler/preview/pages/users.astro

---
// 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>