mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 13:21:29 +04:00
60 lines
2.0 KiB
Plaintext
60 lines
2.0 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'
|
|
import HeaderActionsUsers from '@shared/components/layout/HeaderActionsUsers.astro'
|
|
|
|
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" description="1-18 of 413 people" pageMenu="extra.users">
|
|
<HeaderActionsUsers slot="page-header-actions" />
|
|
<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" />
|
|
<h2 class="m-0 mb-1">
|
|
<a href="#">{person.full_name}</a>
|
|
</h2>
|
|
<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>
|