efim
/
Learning-HTMX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(18): total this month part styled

This commit is contained in:
efim 2024-03-13 16:42:03 +00:00
parent 6b764ae61b
commit 269cb2967c
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
18-expenses-chart/templates/index.templ
View File

@ -50,7 +50,7 @@ templ dayExpenseColumn(expense, percentage float32, day string, isCurrentDay boo
// The 7 vertical bars of the per-day expenses
templ expensesChart(expenses, percentages []float32, currentDayNum int) {
<div class="grid grid-cols-7 place-content-between gap-x-3 py-2">
<div class="grid grid-cols-7 place-content-between gap-x-3">
for i := 0; i < 7; i++ {
@dayExpenseColumn(expenses[i], percentages[i], days[i], currentDayNum == i)
}
@ -59,17 +59,17 @@ templ expensesChart(expenses, percentages []float32, currentDayNum int) {
// Big container with chard and total expenses of the week
templ spendingSummaryComponent(expenses, percentages []float32, currentDayNum int) {
<div class="bg-neutral-very-pale-orange rounded-xl shadow p-4 py-6 flex flex-col">
<div class="bg-neutral-very-pale-orange rounded-xl shadow p-4 py-6 flex flex-col gap-y-4">
<p2 class="text-neutral-dark-brown text-xl font-bold pb-6">Spending - Last 7 days</p2>
@expensesChart(expenses, percentages, currentDayNum)
<hr class="bg-neutral-cream border-t-0 h-0.5"/>
<div class="flex flex-row text-xs text-neutral-medium-brown">
<div>
Total this month
<p class="text-neutral-dark-brown text-xl font-bold">$478.33</p>
<div class="grid grid-cols-2 text-sm text-neutral-medium-brown">
<p class="col-span-full">Total this month</p>
<div class="grow">
<p class="grid items-center text-neutral-dark-brown text-2xl font-bold h-full">$478.33</p>
</div>
<div>
<p class="text-neutral-dark-brown">+2.4%</p>
<div class="text-right">
<p class="text-neutral-dark-brown font-bold">+2.4%</p>
from last month
</div>
</div>