improve add expense form UI

internal/ui/components/expense/expense.templ

@@ -8,6 +8,9 @@ import (
 	"git.juancwu.dev/juancwu/budgit/internal/ui/components/input"
 	"git.juancwu.dev/juancwu/budgit/internal/ui/components/tagsinput"
 	"time"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/radio"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/label"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/datepicker"
 )
 
 templ AddExpenseForm(space *model.Space, tags []*model.Tag, lists []*model.ShoppingList) {
@@ -21,14 +24,35 @@ templ AddExpenseForm(space *model.Space, tags []*model.Tag, lists []*model.Shopp
 		@csrf.Token()
 		// Type
 		<div class="flex gap-4">
-			<label>
-				<input type="radio" name="type" value="expense" checked class="radio"/>
-				<span class="label-text ml-2">Expense</span>
-			</label>
-			<label>
-				<input type="radio" name="type" value="topup" class="radio"/>
-				<span class="label-text ml-2">Top-up</span>
-			</label>
+			<div class="flex items-start gap-3">
+				@radio.Radio(radio.Props{
+					ID:      "expense-type-expense",
+					Name:    "type",
+					Value:   "expense",
+					Checked: true,
+				})
+				<div class="grid gap-2">
+					@label.Label(label.Props{
+						For: "expense-type-expense",
+					}) {
+						Expense
+					}
+				</div>
+			</div>
+			<div class="flex items-start gap-3">
+				@radio.Radio(radio.Props{
+					ID:    "expense-type-topup",
+					Name:  "type",
+					Value: "topup",
+				})
+				<div class="grid gap-2">
+					@label.Label(label.Props{
+						For: "expense-type-topup",
+					}) {
+						Top-up
+					}
+				</div>
+			</div>
 		</div>
 		// Description
 		<div>
@@ -52,11 +76,10 @@ templ AddExpenseForm(space *model.Space, tags []*model.Tag, lists []*model.Shopp
 		// Date
 		<div>
 			<label for="date" class="label">Date</label>
-			@input.Input(input.Props{
-				Name:       "date",
+			@datepicker.DatePicker(datepicker.Props{
 				ID:         "date",
-				Type:       "date",
-				Value:      time.Now().Format("2006-01-02"),
+				Name:       "date",
+				Value:      time.Now(),
 				Attributes: templ.Attributes{"required": "true"},
 			})
 		</div>