budgit/internal/ui/pages/app_space_dashboard.templ
2026-01-14 21:11:16 +00:00

85 lines
No EOL
2.5 KiB
Text

package pages
import (
"git.juancwu.dev/juancwu/budgit/internal/model"
"git.juancwu.dev/juancwu/budgit/internal/ui/components/button"
"git.juancwu.dev/juancwu/budgit/internal/ui/components/csrf"
"git.juancwu.dev/juancwu/budgit/internal/ui/components/dialog"
"git.juancwu.dev/juancwu/budgit/internal/ui/components/input"
"git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
)
templ SpaceDashboardPage(space *model.Space, lists []*model.ShoppingList, tags []*model.Tag) {
@layouts.Space("Dashboard", space) {
<div class="space-y-4">
<div class="flex justify-between items-center">
<h1 class="text-2xl font-bold">Welcome to { space.Name }!</h1>
@dialog.Dialog(dialog.Props{ ID: "invite-member-dialog" }) {
@dialog.Trigger() {
@button.Button() {
Invite Member
}
}
@dialog.Content() {
@dialog.Header() {
@dialog.Title() { Invite Member }
@dialog.Description() {
Send an invitation email to add a new member to this space.
}
}
<form
hx-post={ "/app/spaces/" + space.ID + "/invites" }
hx-swap="innerHTML"
class="space-y-4"
>
@csrf.Token()
<div>
<label for="email" class="label">Email Address</label>
@input.Input(input.Props{
Name: "email",
ID: "email",
Type: "email",
Attributes: templ.Attributes{"required": "true"},
})
</div>
<div class="flex justify-end">
@button.Button(button.Props{ Type: button.TypeSubmit }) {
Send Invitation
}
</div>
</form>
}
}
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
// Shopping Lists section
<div class="border rounded-lg p-4">
<h2 class="text-lg font-semibold mb-2">Shopping Lists</h2>
if len(lists) > 0 {
<ul>
for _, list := range lists {
<li>{ list.Name }</li>
}
</ul>
} else {
<p class="text-sm text-muted-foreground">No shopping lists yet.</p>
}
</div>
// Tags section
<div class="border rounded-lg p-4">
<h2 class="text-lg font-semibold mb-2">Tags</h2>
if len(tags) > 0 {
<div class="flex flex-wrap gap-2">
for _, tag := range tags {
<span class="bg-secondary text-secondary-foreground rounded-full px-3 py-1 text-sm">{ tag.Name }</span>
}
</div>
} else {
<p class="text-sm text-muted-foreground">No tags yet.</p>
}
</div>
</div>
</div>
}
}