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 // The 7 vertical bars of the per-day expenses
templ expensesChart(expenses, percentages []float32, currentDayNum int) { 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++ { for i := 0; i < 7; i++ {
@dayExpenseColumn(expenses[i], percentages[i], days[i], currentDayNum == 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 // Big container with chard and total expenses of the week
templ spendingSummaryComponent(expenses, percentages []float32, currentDayNum int) { 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> <p2 class="text-neutral-dark-brown text-xl font-bold pb-6">Spending - Last 7 days</p2>
@expensesChart(expenses, percentages, currentDayNum) @expensesChart(expenses, percentages, currentDayNum)
<hr class="bg-neutral-cream border-t-0 h-0.5"/> <hr class="bg-neutral-cream border-t-0 h-0.5"/>
<div class="flex flex-row text-xs text-neutral-medium-brown"> <div class="grid grid-cols-2 text-sm text-neutral-medium-brown">
<div> <p class="col-span-full">Total this month</p>
Total this month <div class="grow">
<p class="text-neutral-dark-brown text-xl font-bold">$478.33</p> <p class="grid items-center text-neutral-dark-brown text-2xl font-bold h-full">$478.33</p>
</div> </div>
<div> <div class="text-right">
<p class="text-neutral-dark-brown">+2.4%</p> <p class="text-neutral-dark-brown font-bold">+2.4%</p>
from last month from last month
</div> </div>
</div> </div>