feat: create space

internal/ui/forms/create_space.templ

@@ -0,0 +1,48 @@
+package forms
+
+import "git.juancwu.dev/juancwu/budgit/internal/ui/components/card"
+import "git.juancwu.dev/juancwu/budgit/internal/routeurl"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/components/form"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/components/input"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/components/button"
+
+templ CreateSpace(errMsg string, spaceName string) {
+	<form hx-post={ routeurl.URL("action.app.spaces.create") }>
+		@card.Card(card.Props{Class: "rounded-sm"}) {
+			@card.Content(card.ContentProps{Class: "p-4"}) {
+				@form.Item() {
+					@form.Label(form.LabelProps{
+						For: "space-name",
+					}) {
+						Space Name
+					}
+					@input.Input(input.Props{
+						ID:          "space-name",
+						Type:        input.TypeText,
+						Placeholder: "My Expenses",
+						Class:       "rounded-sm",
+						Name:        "name",
+						Value:       spaceName,
+						HasError:    errMsg != "",
+						Attributes: templ.Attributes{
+							"autocomplete": "off",
+						},
+					})
+					if errMsg != "" {
+						@form.Message(form.MessageProps{Variant: form.MessageVariantError}) {
+							{ errMsg }
+						}
+					}
+					@form.Description() {
+						You can always rename your space later in space settings.
+					}
+				}
+			}
+			@card.Footer() {
+				@button.Button(button.Props{Class: "w-full", Type: button.TypeSubmit}) {
+					Create
+				}
+			}
+		}
+	</form>
+}

internal/ui/forms/create_space_success.templ

@@ -0,0 +1,20 @@
+package forms
+
+import "git.juancwu.dev/juancwu/budgit/internal/ui/components/card"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/components/button"
+import "git.juancwu.dev/juancwu/budgit/internal/routeurl"
+
+templ CreateSpaceSuccess(spaceID string) {
+	<div>
+		@card.Card(card.Props{Class: "rounded-sm"}) {
+			@card.Content(card.ContentProps{Class: "p-4"}) {
+				<p class="text-xl text-success">Space successfully created!</p>
+			}
+			@card.Footer() {
+				@button.Button(button.Props{Class: "w-full", Href: routeurl.URL("page.app.spaces.space.overview", "spaceID", spaceID)}) {
+					Start tracking expenses
+				}
+			}
+		}
+	</div>
+}

internal/ui/pages/create_space.templ

@@ -0,0 +1,31 @@
+package pages
+
+import "git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
+import "git.juancwu.dev/juancwu/budgit/internal/ctxkeys"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/blocks"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/forms"
+
+templ CreateSpace() {
+	@layouts.Base(layouts.SEOProps{
+		Title:       "Create Space",
+		Description: "Create space to manage and track expenses in a collaborative manner.",
+		Path:        ctxkeys.URLPath(ctx),
+	}) {
+		<div class="min-h-screen flex items-center justify-center p-4 relative">
+			<div class="absolute top-4 right-4 z-10">
+				@blocks.ThemeSwitcher()
+			</div>
+			<div class="w-full max-w-2xl md:grid md:grid-cols-2 md:gap-4">
+				<div class="space-y-2">
+					<h1 class="text-2xl">
+						Create Space
+					</h1>
+					<p class="text-sm text-muted-foreground">This is where you or your group can track expenses.</p>
+				</div>
+				<div class="mt-4 md:mt-0">
+					@forms.CreateSpace("", "")
+				</div>
+			</div>
+		</div>
+	}
+}

internal/ui/pages/page_app_spaces_space_overview.templ

@@ -0,0 +1,9 @@
+package pages
+
+import "git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
+
+templ SpaceOverview(spaceName string) {
+	@layouts.App("Space Overview") {
+		<div>space overview: { spaceName }</div>
+	}
+}

internal/ui/pages/spaces.templ

@@ -17,7 +17,7 @@ templ Spaces(spaces []blocks.SpaceCardInfo) {
 				<div>
 					@button.Button(button.Props{
 						Class: "flex gap-2 items-center",
-						Href:  routeurl.URL("page.app.create-space"),
+						Href:  routeurl.URL("page.app.spaces.create"),
 					}) {
 						@icon.Plus()
 						Create space