mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 13:21:29 +04:00
Paweł KunaandStarDev
575d68572f
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
50 lines
1.2 KiB
Plaintext
50 lines
1.2 KiB
Plaintext
---
|
|
// NOTE: widgets page passes `value=` but only `percentage` (default 20) drives the bar — `value` is accepted but ignored.
|
|
import Progress from '@ui/Progress.astro';
|
|
import AvatarList from '@ui/AvatarList.astro';
|
|
import Icon from '@ui/Icon.astro';
|
|
import CardTitle from '@ui/CardTitle.astro';
|
|
|
|
interface Props {
|
|
title?: string;
|
|
badge?: string;
|
|
offset?: number;
|
|
limit?: number;
|
|
percentage?: number | string;
|
|
percentageColor?: string;
|
|
due?: string;
|
|
/** unused — see note above */
|
|
value?: number | string;
|
|
}
|
|
|
|
const {
|
|
title = 'Task Title',
|
|
badge,
|
|
offset = 40,
|
|
limit = 7,
|
|
percentage = 20,
|
|
percentageColor = 'green',
|
|
due = '2 days',
|
|
} = Astro.props;
|
|
---
|
|
|
|
<div class="card">
|
|
<Progress value={percentage} class="card-progress" color={percentageColor} />
|
|
<div class="card-body">
|
|
<CardTitle>
|
|
<a href="#">{title}</a>
|
|
{badge && <Fragment> <span class="badge ms-2">{badge}</span></Fragment>}
|
|
</CardTitle>
|
|
|
|
<AvatarList offset={offset} limit={limit} stacked class="mb-3" />
|
|
|
|
<div class="card-meta d-flex justify-content-between">
|
|
<div class="d-flex align-items-center">
|
|
<Icon name="check" class="me-2" />
|
|
<span>5/10</span>
|
|
</div>
|
|
<span>Due {due}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|