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

feat(18): basic templates

Browse Source
This commit is contained in:
efim
2024-03-13 12:58:26 +00:00
parent 8601288230
commit 623d05da91
3 changed files with 59 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,38 @@
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>
@@ -15,22 +48,12 @@ templ IndexPage() {
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body class="bg-neutral-very-pale-orange">
My balance
Spending - Last 7 days
$921.48
mon
tue
wed
thu
fri
sat
sun
Total this month
$478.33
+2.4%
from last month
<div class="attribution">
<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>