mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 13:21:29 +04:00
45 lines
1.0 KiB
Plaintext
45 lines
1.0 KiB
Plaintext
---
|
|
import Avatar from '@ui/Avatar.astro';
|
|
import AvatarList from '@ui/AvatarList.astro';
|
|
import Progress from '@ui/Progress.astro';
|
|
|
|
interface Props {
|
|
title?: string;
|
|
date?: string;
|
|
stageColor?: string;
|
|
stage?: string;
|
|
projectColor?: string;
|
|
percentage?: number | string;
|
|
percentageColor?: string;
|
|
avatarOffset?: number;
|
|
avatarLimit?: number;
|
|
}
|
|
|
|
const {
|
|
title = 'New website',
|
|
date = '28 Aug 2019',
|
|
stageColor = 'green',
|
|
stage = 'Waiting',
|
|
projectColor,
|
|
percentage,
|
|
percentageColor,
|
|
avatarOffset,
|
|
avatarLimit,
|
|
} = Astro.props;
|
|
---
|
|
|
|
<div class="card">
|
|
<div class="card-body p-4 py-5 text-center">
|
|
<Avatar size="xl" placeholder="W" class="mb-4" color={projectColor} />
|
|
<h3 class="mb-0">{title}</h3>
|
|
<p class="text-secondary">Due to: {date}</p>
|
|
<p class="mb-3">
|
|
<span class={`badge bg-${stageColor}-lt`}>{stage}</span>
|
|
</p>
|
|
<div>
|
|
<AvatarList stacked offset={avatarOffset} limit={avatarLimit} />
|
|
</div>
|
|
</div>
|
|
<Progress class="card-progress" value={percentage} color={percentageColor} />
|
|
</div>
|