103 lines
3.5 KiB
Plaintext
103 lines
3.5 KiB
Plaintext
package templates
|
|
|
|
import "fmt"
|
|
import "slices"
|
|
|
|
var costs []float32 = []float32{17.45, 34.91, 52.36, 31.07, 23.39, 43.28, 25.48}
|
|
|
|
templ myBalanceComponent() {
|
|
<div class="rounded-xl text-neutral-very-pale-orange text-xs bg-primary-soft-red p-4 shadow">
|
|
My balance
|
|
<p class="text-xl font-bold">$921.48</p>
|
|
</div>
|
|
}
|
|
|
|
var days []string = []string{"mon", "tue", "wed", "thu", "fri", "sat", "sun"}
|
|
|
|
func prepareSummaryComponent(expenses []float32) templ.Component {
|
|
fmt.Println("hello, preparing expenses: ", expenses)
|
|
max := slices.Max(expenses)
|
|
percentages := make([]float32, 0, len(expenses))
|
|
for _, price := range expenses {
|
|
percentages = append(percentages, price/max)
|
|
}
|
|
|
|
currentDayNum := 2
|
|
|
|
return spendingSummaryComponent(expenses, percentages, currentDayNum)
|
|
}
|
|
|
|
css expenseBarVars(percentage float32) {
|
|
--height-percentage: { fmt.Sprintf("%.2f", percentage) };
|
|
transform: scaleY(var(--height-percentage));
|
|
}
|
|
|
|
templ dayExpenseColumn(expense, percentage float32, day string, isCurrentDay bool) {
|
|
<div class="flex flex-col place-items-center">
|
|
<div
|
|
class={ "rounded w-full h-24 origin-bottom ",
|
|
expenseBarVars(percentage),
|
|
templ.KV("bg-primary-soft-red", !isCurrentDay),
|
|
templ.KV("bg-primary-cyan", isCurrentDay) }
|
|
></div>
|
|
<p class="text-neutral-medium-brown text-xs py-2">{ day }</p>
|
|
</div>
|
|
}
|
|
|
|
// 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">
|
|
for i := 0; i < 7; i++ {
|
|
@dayExpenseColumn(expenses[i], percentages[i], days[i], currentDayNum == i)
|
|
}
|
|
</div>
|
|
}
|
|
|
|
// 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 flex flex-col">
|
|
<p2 class="text-neutral-dark-brown text-lg font-bold pb-4">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>
|
|
<div>
|
|
<p class="text-neutral-dark-brown">+2.4%</p>
|
|
from last month
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
templ IndexPage() {
|
|
<html lang="en">
|
|
<head>
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@400,700&display=swap" rel="stylesheet"/>
|
|
<link rel="stylesheet" href="/styles/templ.css"/>
|
|
<link href="/static/output.css" rel="stylesheet"/>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <!-- displays site properly based on user's device -->
|
|
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png"/>
|
|
<title>Frontend Mentor | Expenses chart component</title>
|
|
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
|
|
<style>
|
|
.attribution { font-size: 11px; text-align: center; }
|
|
.attribution a { color: hsl(228, 45%, 44%); }
|
|
</style>
|
|
</head>
|
|
<body class="bg-neutral-cream text-bold p-4 h-full grid items-center">
|
|
<div class="flex flex-col gap-4">
|
|
@myBalanceComponent()
|
|
@prepareSummaryComponent(costs)
|
|
</div>
|
|
<div class="attribution fixed bottom-0 inset-x-0">
|
|
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
|
|
Coded by <a href="#">Your Name Here</a>.
|
|
</div>
|
|
</body>
|
|
</html>
|
|
}
|