feat: space card for spaces list

internal/ui/pages/app_settings.templ

@@ -8,15 +8,13 @@ import (
 	"git.juancwu.dev/juancwu/budgit/internal/ui/components/input"
 	"git.juancwu.dev/juancwu/budgit/internal/ui/components/label"
 	"git.juancwu.dev/juancwu/budgit/internal/ui/components/card"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/blocks"
 )
 
 templ AppSettings(hasPassword bool, errorMsg string) {
 	@layouts.App("Settings") {
 		<div class="container max-w-2xl px-6 py-8">
-			<div class="mb-8">
-				<h1 class="text-3xl font-bold">Settings</h1>
-				<p class="text-muted-foreground mt-2">Manage your account settings</p>
-			</div>
+			@blocks.PageHeader("Settings", "Manage your account settings")
 			@card.Card() {
 				@card.Header() {
 					@card.Title() {

internal/ui/pages/spaces.templ

@@ -1,9 +1,34 @@
 package pages
 
 import "git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/blocks"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/components/button"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/components/icon"
+import "git.juancwu.dev/juancwu/budgit/internal/routeurl"
 
-templ Spaces() {
-	@layouts.App("Dashboard") {
-		<div>Spaces</div>
+templ Spaces(spaces []blocks.SpaceCardInfo) {
+	@layouts.App("Spaces") {
+		<div class="container px-6 py-8">
+			<div class="mb-8 w-full flex justify-between items-center">
+				<div>
+					<h1 class="text-3xl font-bold">Spaces</h1>
+					<p class="text-muted-foreground mt-2">Manage and monitor your expenses across collaborative spaces.</p>
+				</div>
+				<div>
+					@button.Button(button.Props{
+						Class: "flex gap-2 items-center",
+						Href:  routeurl.URL("page.app.create-space"),
+					}) {
+						@icon.Plus()
+						Create space
+					}
+				</div>
+			</div>
+			<div class="">
+				for _, space := range spaces {
+					@blocks.SpaceCard(space)
+				}
+			</div>
+		</div>
 	}
 }