mirror of
https://github.com/tabler/tabler.git
synced 2026-08-07 20:02:23 +04:00
Paweł Kuna
71 lines
1.9 KiB
Plaintext
71 lines
1.9 KiB
Plaintext
---
|
|
// Port of preview/pages/users.html (layout: default)
|
|
// Note: the Liquid template assigns `progress` and `online_counter` per person
|
|
// but never renders them — omitted here.
|
|
// Note: the avatar include passes `rounded=true`, which ui/avatar.html ignores
|
|
// (no such param) — omitted; Avatar.astro has no `rounded` prop.
|
|
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
|
import Avatar from '@shared/components/ui/Avatar.astro';
|
|
import Icon from '@shared/components/Icon.astro';
|
|
import Pagination from '@shared/components/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">
|
|
<div class="card">
|
|
<div class="card-body 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>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
}
|
|
</div>
|
|
|
|
<div class="d-flex mt-4">
|
|
<Pagination class="ms-auto" />
|
|
</div>
|
|
</DefaultLayout>
|