mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 13:21:29 +04:00
Render Modal as real markup; drain scripts via CaptureScript (#2742)
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -1,60 +1,57 @@
|
||||
---
|
||||
// Equivalent of cards/users-list-2.html
|
||||
import Avatar from '@ui/Avatar.astro'
|
||||
import CardTitle from '@ui/CardTitle.astro'
|
||||
import people from '@data/people.json'
|
||||
import { randomNumber, timeagoLabel } from '@shared/lib/pseudo-random'
|
||||
import Avatar from '@ui/Avatar.astro';
|
||||
import CardTitle from '@ui/CardTitle.astro';
|
||||
import people from '@data/people.json';
|
||||
import { randomNumber, timeagoLabel } from '@shared/lib/pseudo-random';
|
||||
|
||||
interface Person {
|
||||
full_name?: string
|
||||
photo?: string
|
||||
[key: string]: unknown
|
||||
full_name?: string;
|
||||
photo?: string;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
limit?: number
|
||||
offset?: number
|
||||
title?: string
|
||||
class?: string
|
||||
limit?: number;
|
||||
offset?: number;
|
||||
title?: string;
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const { limit = 10, offset = 0, title = 'Top users', class: className } = Astro.props
|
||||
const { limit = 10, offset = 0, title = 'Top users', class: className } = Astro.props;
|
||||
|
||||
const colors = 'green,red,yellow,x,x'.split(',')
|
||||
const colors = 'green,red,yellow,x,x'.split(',');
|
||||
|
||||
const rows = (people as Person[]).slice(offset, offset + limit).map((person, idx) => {
|
||||
const index = idx + 1 // forloop.index (1-based)
|
||||
return {
|
||||
person,
|
||||
status: colors[randomNumber(index + 5, 0, colors.length - 1)],
|
||||
timeago: timeagoLabel(index, 6),
|
||||
}
|
||||
})
|
||||
const index = idx + 1; // forloop.index (1-based)
|
||||
return {
|
||||
person,
|
||||
status: colors[randomNumber(index + 5, 0, colors.length - 1)],
|
||||
timeago: timeagoLabel(index, 6),
|
||||
};
|
||||
});
|
||||
---
|
||||
|
||||
<div class={`card${className ? ` ${className}` : ''}`}>
|
||||
<div class="card-header">
|
||||
<CardTitle>{title}</CardTitle>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
{
|
||||
rows.map((row) => (
|
||||
<div class="col-6">
|
||||
<div class="row g-3 align-items-center">
|
||||
<a href="#" class="col-auto">
|
||||
<Avatar person={row.person} status={row.status} />
|
||||
</a>
|
||||
<div class="col text-truncate">
|
||||
<a href="#" class="text-reset d-block text-truncate">
|
||||
{row.person.full_name}
|
||||
</a>
|
||||
<div class="text-secondary text-truncate mt-n1">{row.timeago}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<CardTitle>{title}</CardTitle>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
{
|
||||
rows.map((row) => (
|
||||
<div class="col-6">
|
||||
<div class="row g-3 align-items-center">
|
||||
<a href="#" class="col-auto">
|
||||
<Avatar person={row.person} status={row.status} />
|
||||
</a>
|
||||
<div class="col text-truncate">
|
||||
<a href="#" class="text-reset d-block text-truncate">{row.person.full_name}</a>
|
||||
<div class="text-secondary text-truncate mt-n1">{row.timeago}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user