Files
tabler/shared/components/cards/DevelopmentActivity.astro
T

66 lines
1.9 KiB
Plaintext

---
import { personById } from '@shared/lib/people'
import Chart from '@shared/components/demo/Chart.astro'
import Sparkline from '@ui/Sparkline.astro'
import Icon from '@ui/Icon.astro'
import Avatar from '@ui/Avatar.astro'
import commits from '@data/commits.json'
import { formatCommitDate } from '@shared/lib/date-format'
import CardTitle from '@ui/CardTitle.astro'
interface Commit {
hash: string
short_hash: string
author: string
date: string
description: string
}
const rows = (commits as Commit[]).slice(0, 5)
---
<div class="card">
<div class="card-header border-0">
<CardTitle>Development activity</CardTitle>
</div>
<div class="position-relative">
<div class="position-absolute top-0 start-0 px-3 mt-1 w-75">
<div class="row g-2">
<div class="col-auto"><Sparkline id="activity" type="circle" values={[35]} size="lg" color="primary" label="auto" ariaLabel="35% of today's goal" /></div>
<div class="col">
<div>Today's Earning: $4,262.40</div>
<div class="text-secondary"><Icon name="trending-up" color="green" class="icon-inline" /> +5% more than yesterday</div>
</div>
</div>
</div>
<Chart chartId="development-activity" height={12} label="Development activity" />
</div>
<div class="card-table table-responsive">
<table class="table table-vcenter">
<thead>
<tr>
<th>User</th>
<th>Commit</th>
<th>Date</th>
</tr>
</thead>
<tbody>
{
rows.map((commit, index) => (
<tr>
<td class="w-1">
<Avatar person={personById(index + 1)} size="sm" />
</td>
<td class="td-truncate">
<div class="text-truncate">{commit.description}</div>
</td>
<td class="text-nowrap text-secondary">{formatCommitDate(commit.date)}</td>
</tr>
))
}
</tbody>
</table>
</div>
</div>