feat: space card for spaces list

internal/handler/space.go

@@ -5,7 +5,9 @@ import (
 
 	"git.juancwu.dev/juancwu/budgit/internal/service"
 	"git.juancwu.dev/juancwu/budgit/internal/ui"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/blocks"
 	"git.juancwu.dev/juancwu/budgit/internal/ui/pages"
+	"github.com/shopspring/decimal"
 )
 
 type spaceHandler struct {
@@ -17,5 +19,10 @@ func NewSpaceHandler(spaceService *service.SpaceService) *spaceHandler {
 }
 
 func (h *spaceHandler) SpacesPage(w http.ResponseWriter, r *http.Request) {
-	ui.Render(w, r, pages.Spaces())
+	ui.Render(w, r, pages.Spaces([]blocks.SpaceCardInfo{
+		{
+			ID: "test-1", Name: "My Space",
+			MemberCount: 3, TotalBalance: decimal.NewFromFloat(123.23),
+		},
+	}))
 }

internal/misc/currency/currency.go

@@ -0,0 +1,8 @@
+package currency
+
+type Currency string
+
+const (
+	CAD Currency = "cad"
+	USD Currency = "usd"
+)

internal/ui/blocks/page_header.templ

@@ -0,0 +1,8 @@
+package blocks
+
+templ PageHeader(heading, subHeading string) {
+	<div class="mb-8">
+		<h1 class="text-3xl font-bold">{ heading }</h1>
+		<p class="text-muted-foreground mt-2">{ subHeading }</p>
+	</div>
+}

internal/ui/blocks/space_card.templ

@@ -0,0 +1,38 @@
+package blocks
+
+import "github.com/shopspring/decimal"
+import "strings"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/components/icon"
+import "fmt"
+import "git.juancwu.dev/juancwu/budgit/internal/misc/currency"
+
+type SpaceCardInfo struct {
+	ID           string
+	Name         string
+	MemberCount  int
+	TotalBalance decimal.Decimal
+	Currency     currency.Currency
+}
+
+templ SpaceCard(info SpaceCardInfo) {
+	<a href="#" class="px-2 py-2 block rounded-md hover:bg-sidebar-accent">
+		<div class="flex items-center justify-between">
+			<div class="flex gap-4 items-center">
+				<div class="w-10 h-10 shrink-0 overflow-hidden rounded-md bg-muted flex items-center justify-center">
+					{ strings.ToUpper(string(info.Name[0])) }
+				</div>
+				<div>
+					<p class="font-semibold">{ info.Name }</p>
+					<p class="text-xs text-muted-foreground">
+						<span>{ info.TotalBalance.StringFixedBank(2) }</span>
+						<span>•</span>
+						<span>{ fmt.Sprintf("%d members", info.MemberCount) }</span>
+					</p>
+				</div>
+			</div>
+			<div class="h-full flex items-center justify-center">
+				@icon.ChevronRight()
+			</div>
+		</div>
+	</a>
+}

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