feat(account): #49 basic account page design

handler/account.go

@@ -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)
 	}
 }

template/account/account.templ

@@ -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>
+}

template/account/workout.templ

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

template/index.templ

@@ -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>
-}

template/layout.templ

@@ -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">

template/not_found.templ

@@ -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>
 }

template/root.templ

@@ -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>
+}