63 lines
1.9 KiB
Plaintext
63 lines
1.9 KiB
Plaintext
package templates
|
|
|
|
templ myBalanceComponent() {
|
|
<div class="rounded-xl text-neutral-very-pale-orange text-sm bg-primary-soft-red p-4 shadow">
|
|
My balance
|
|
<p class="text-xl font-bold">$921.48</p>
|
|
</div>
|
|
}
|
|
|
|
templ spendingSummaryComponent() {
|
|
<div class="bg-neutral-very-pale-orange rounded-xl shadow p-4 flex flex-col">
|
|
<p2>Spending - Last 7 days</p2>
|
|
<div class="flex flex-row">
|
|
mon
|
|
tue
|
|
wed
|
|
thu
|
|
fri
|
|
sat
|
|
sun
|
|
</div>
|
|
<hr class="bg-neutral-cream border-t-0 h-0.5"/>
|
|
<div class="flex flex-row text-sm 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 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()
|
|
@spendingSummaryComponent()
|
|
</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>
|
|
}
|