budgit/internal/ui/pages/spaces.templ

106 lines
3 KiB
Text

package pages
import (
"fmt"
"git.juancwu.dev/juancwu/budgit/internal/ctxkeys"
"git.juancwu.dev/juancwu/budgit/internal/routeurl"
"git.juancwu.dev/juancwu/budgit/internal/ui/blocks"
"git.juancwu.dev/juancwu/budgit/internal/ui/components/button"
"git.juancwu.dev/juancwu/budgit/internal/ui/components/icon"
"git.juancwu.dev/juancwu/budgit/internal/ui/components/sidebar"
"git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
"git.juancwu.dev/juancwu/budgit/internal/ui/utils"
"github.com/shopspring/decimal"
)
templ Spaces(spaces []blocks.SpaceCardInfo, totalBalance decimal.Decimal) {
{{
user := ctxkeys.User(ctx)
displayName := ""
if user != nil {
displayName = *user.Name
}
}}
@layouts.App("My Spaces", spaceOverviewSidebarContent()) {
<div class="container px-6 py-8 mx-auto">
<div class="mb-8 w-full space-y-2 md:space-y-0 md:flex justify-between items-end">
<div class="space-y-2">
<p class="text-muted-foreground text-sm">My Spaces</p>
<h1 class="text-2xl font-bold">Hello, { displayName }</h1>
if len(spaces) == 0 {
<p class="text-muted-foreground">Create a space to start tracking your expenses.</p>
} else {
{{
countPhrase := fmt.Sprintf("Across %d spaces", len(spaces))
if len(spaces) == 1 {
countPhrase = "Across 1 space"
}
}}
<p class="text-muted-foreground">{ countPhrase } you have <span class="font-medium text-foreground">${ utils.FormatDecimalWithThousands(totalBalance.StringFixedBank(2)) }</span> tracked.</p>
}
</div>
<div>
@button.Button(button.Props{
Class: "flex gap-2 items-center",
Href: routeurl.URL("page.app.spaces.create"),
}) {
@icon.Plus()
Create space
}
</div>
</div>
<div class="">
for _, space := range spaces {
@blocks.SpaceCard(space)
}
</div>
</div>
}
}
templ SharedSpaces(spaces []blocks.SpaceCardInfo) {
@layouts.App("Shared with me", spaceOverviewSidebarContent()) {
<div class="container px-6 py-8 mx-auto">
<div class="mb-8">
<h1 class="text-3xl font-bold">Shared with me</h1>
<p class="text-muted-foreground mt-2">Spaces that others have shared with you.</p>
</div>
<div class="">
for _, space := range spaces {
@blocks.SpaceCard(space)
}
</div>
</div>
}
}
templ spaceOverviewSidebarContent() {
@sidebar.Group() {
@sidebar.GroupLabel() {
Overview
}
@sidebar.Menu() {
@sidebar.MenuItem() {
@sidebar.MenuButton(sidebar.MenuButtonProps{
Href: routeurl.URL("page.app.spaces"),
IsActive: ctxkeys.URLPath(ctx) == routeurl.URL("page.app.spaces"),
Tooltip: "My spaces",
}) {
@icon.User()
<span>My spaces</span>
}
}
@sidebar.MenuItem() {
@sidebar.MenuButton(sidebar.MenuButtonProps{
Href: routeurl.URL("page.app.shared-with-me"),
IsActive: ctxkeys.URLPath(ctx) == routeurl.URL("page.app.shared-with-me"),
Tooltip: "Shared with me",
}) {
@icon.Users()
<span>Shared with me</span>
}
}
}
}
}