mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 21:27:06 +04:00
47 lines
1.4 KiB
Plaintext
47 lines
1.4 KiB
Plaintext
---
|
|
import CardActions from '@ui/CardActions.astro'
|
|
import Icon from '@ui/Icon.astro'
|
|
import ListGroup from '@ui/ListGroup.astro'
|
|
import ListGroupItem from '@ui/ListGroupItem.astro'
|
|
import crmDashboard from '@data/crm-dashboard.json'
|
|
import CardTitle from '@ui/CardTitle.astro'
|
|
|
|
const tasks = crmDashboard.tasks_due
|
|
---
|
|
|
|
<div class="card h-100">
|
|
<div class="card-header">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<CardTitle class="mb-0">{tasks.title}</CardTitle>
|
|
<span class="badge bg-red text-white">{tasks.badge}</span>
|
|
</div>
|
|
<CardActions>
|
|
<button type="button" class="btn btn-primary btn-sm">
|
|
<Icon name="plus" class="me-1" />
|
|
{tasks.button_text}
|
|
</button>
|
|
</CardActions>
|
|
</div>
|
|
|
|
<ListGroup flush hoverable>
|
|
{
|
|
tasks.items.map((item, index) => (
|
|
<ListGroupItem>
|
|
<div class="row align-items-center g-2">
|
|
<div class="col-auto">
|
|
<input type="checkbox" class="form-check-input m-0" id={`task-due-${index}`} />
|
|
</div>
|
|
<div class="col">
|
|
<label for={`task-due-${index}`}>{item.text}</label>
|
|
</div>
|
|
<div class="col-auto d-flex align-items-center gap-2">
|
|
<span class={`legend-dot bg-${item.color}`} />
|
|
<span class="small text-secondary">{item.due}</span>
|
|
</div>
|
|
</div>
|
|
</ListGroupItem>
|
|
))
|
|
}
|
|
</ListGroup>
|
|
</div>
|