feat(budget): first draft

internal/account/template.templ

@@ -13,7 +13,9 @@ templ template(accounts []*Account) {
 			hx-swap="afterbegin"
 			class="ml-auto button button-primary px-2 flex-1 flex items-center gap-2 justify-center"
 		>
+			<div class="w-3">
 				@svg.Plus()
+			</div>
 			<p>New Account</p>
 		</button>
 		<div id="account-items" class="my-6 flex flex-col items-center">

internal/budget/handler.go

@@ -54,7 +54,7 @@ func (h HandlerImpl) handlePage() http.HandlerFunc {
 		// 	return
 		// }
 
-		comp := Page()
+		comp := page()
 		h.r.RenderLayout(r, w, comp, user)
 	}
 }
@@ -113,7 +113,7 @@ func (h HandlerImpl) handlePost() http.HandlerFunc {
 
 		// To disable unused variable
 		slog.Info("test", "item", budget)
-		comp := Item()
-		h.r.Render(r, w, comp)
+		// comp := item()
+		// h.r.Render(r, w, comp)
 	}
 }

internal/budget/template.templ

@@ -1,7 +1,14 @@
 package budget
 
-templ Page() {
-	<div></div>
+import "spend-sparrow/internal/template/svg"
+
+templ page() {
+	<div class="flex flex-wrap gap-20 text-xl mt-10 justify-center">
+		@newItem()
+		for i:=range(10) {
+			@item(i)
+		}
+	</div>
 }
 
 templ Items() {
@@ -12,6 +19,22 @@ templ Edit() {
 	<div></div>
 }
 
-templ Item() {
-	<div></div>
+templ newItem() {
+	<section class="p-5 flex gap-4 active:bg-gray-200 flex-col justify-center items-center hover:bg-gray-100 transition-all cursor-pointer w-44 h-44 rounded-lg bg-gray-50 border-1 border-gray-300">
+		New Budget
+		<div class="w-10">
+			@svg.Plus()
+		</div>
+	</section>
+}
+
+templ item(i int) {
+	<section class="flex flex-col w-44 h-44 p-5 rounded-lg bg-gray-50 border-1 border-gray-300 ">
+		<span>
+			Budget { i }
+		</span>
+		<span>
+			{ 200 + i }€
+		</span>
+	</section>
 }

internal/template/svg/default.templ

@@ -19,7 +19,7 @@ templ Eye() {
 }
 
 templ Plus() {
-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 304 384" class="h-4 w-4 text-gray-500">
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 304 384" class="text-gray-500">
 		<path fill="currentColor" d="M299 213H171v128h-43V213H0v-42h128V43h43v128h128v42z"></path>
 	</svg>
 }

internal/transaction/template.templ

@@ -65,7 +65,9 @@ templ TransactionComp(items templ.Component, filter TransactionItemsFilter, acco
 				hx-swap="afterbegin"
 				class="button button-primary ml-auto px-2 flex items-center gap-2 justify-center"
 			>
+				<div class="w-3">
 					@svg.Plus()
+				</div>
 				<p>New Transaction</p>
 			</button>
 		</div>

internal/treasure_chest/template.templ

@@ -15,7 +15,9 @@ templ TreasureChestComp(treasureChests []*treasure_chest_types.TreasureChest, mo
 			hx-swap="afterbegin"
 			class="ml-auto text-center button button-primary px-2 flex items-center gap-2"
 		>
+			<div class="w-3">
 				@svg.Plus()
+			</div>
 			New Treasure Chest
 		</button>
 		<div id="treasurechest-items" class="my-6 flex flex-col">
@@ -109,7 +111,9 @@ templ EditTreasureChest(treasureChest *treasure_chest_types.TreasureChest, paren
 					hx-swap="outerHTML"
 					class="button button-primary ml-auto px-2 flex items-center gap-2"
 				>
+					<div class="w-3">
 						@svg.Plus()
+					</div>
 					<p>New Monthly Transaction</p>
 				</button>
 			</div>