feat(account): #49 basic account page design

This commit is contained in:
2025-05-06 23:02:55 +02:00
parent b35d638070
commit ab6ed654cc
7 changed files with 45 additions and 25 deletions

View File

@@ -42,7 +42,7 @@ func (handler AccountImpl) handleAccountPage() http.HandlerFunc {
return
}
comp := account.AccountListComp(nil)
comp := account.Account()
handler.render.RenderLayout(r, w, comp, user)
}
}

View File

@@ -0,0 +1,27 @@
package account
import "fmt"
templ Account() {
<div class="mt-10 flex flex-col items-center">
@accountItem("Sparkasse", 51268)
@accountItem("Bargeld", 11822)
@accountItem("Bargeld Milch", 8200)
</div>
}
func displayBalance(balance int) string {
euros := float64(balance) / 100
return fmt.Sprintf("%.2f €", euros)
}
templ accountItem(name string, balance int) {
<div class="border-1 border-gray-300 w-full max-w-6xl m-4 p-4 bg-gray-50 rounded-lg text-xl flex justify-end gap-4">
<p class="mr-auto">{ name }</p>
<p class="mr-20 text-green-700">{ displayBalance(balance) }</p>
<button class="button button-neglect px-1">Edit</button>
<button class="button button-neglect px-1">Delete</button>
<button class="button button-neglect px-1">Transaction</button>
</div>
}

View File

@@ -1,7 +0,0 @@
package account
import "spend-sparrow/types"
templ AccountListComp(accounts []*types.Account) {
<main class="mx-2"></main>
}

View File

@@ -1,14 +0,0 @@
package template
templ Index() {
<div class="h-full text-center flex flex-col items-center justify-center">
<h1 class="flex gap-2 w-full justify-center">
<img class="w-24" src="/static/favicon.svg" alt="SpendSparrow logo" />
<span class="text-8xl tracking-tighter font-bold font-pirata">SpendSparrow</span>
</h1>
<h2 class="text-3xl mt-8 text-gray-800">
Spend on the important<span class="text-sm">, like a fine Whiskey</span>
</h2>
<a href="/auth/signup" class="mt-24 button button-primary text-2xl p-4 font-bold">Getting Started</a>
</div>
}

View File

@@ -48,11 +48,11 @@ templ Layout(slot templ.Component, user templ.Component, loggedIn bool, path str
<div class="h-12 inset-0 bg-linear-0 from-transparent to-white"></div>
</div>
// Content
<div class="flex-1">
<main class="flex-1">
if slot != nil {
@slot
}
</div>
</main>
// Footer
</div>
<div id="toasts" class="fixed bottom-4 right-4 ml-4 max-w-96 flex flex-col gap-2 z-50">

View File

@@ -5,7 +5,7 @@ templ NotFound() {
<div class="p-16 rounded-lg">
<h1 class="text-4xl mb-5">Not Found</h1>
<p class="text-lg mb-5">The page you are looking for does not exist.</p>
<a href="/" class="">Go back to home</a>
<a href="/" class="button button-primary text-2xl py-2 px-4 mt-10">Go back to home</a>
</div>
</main>
}

14
template/root.templ Normal file
View File

@@ -0,0 +1,14 @@
package template
templ Index() {
<div class="h-full text-center flex flex-col items-center justify-center">
<h1 class="flex gap-2 w-full justify-center">
<img class="w-24" src="/static/favicon.svg" alt="SpendSparrow logo"/>
<span class="text-8xl tracking-tighter font-bold font-pirata">SpendSparrow</span>
</h1>
<h2 class="text-3xl mt-8 text-gray-800">
Spend on the important<span class="text-sm">, like a fine Whiskey</span>
</h2>
<a href="/auth/signup" class="mt-24 button button-primary text-2xl p-4 font-bold">Getting Started</a>
</div>
}