feat: breadcrumbs
This commit is contained in:
parent
2a9c2ca263
commit
88c8596512
11 changed files with 140 additions and 20 deletions
64
internal/ui/pages/breadcrumbs.templ
Normal file
64
internal/ui/pages/breadcrumbs.templ
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
package pages
|
||||
|
||||
import "git.juancwu.dev/juancwu/budgit/internal/routeurl"
|
||||
import "git.juancwu.dev/juancwu/budgit/internal/ui/components/breadcrumb"
|
||||
|
||||
templ spaceLeafBreadcrumb(spaceName string) {
|
||||
@breadcrumb.Breadcrumb() {
|
||||
@breadcrumb.List() {
|
||||
@breadcrumb.Item() {
|
||||
@breadcrumb.Page() {
|
||||
{ spaceName }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
templ spaceChildBreadcrumb(spaceID, spaceName, leaf string) {
|
||||
@breadcrumb.Breadcrumb() {
|
||||
@breadcrumb.List() {
|
||||
@breadcrumb.Item() {
|
||||
@breadcrumb.Link(breadcrumb.LinkProps{
|
||||
Href: routeurl.URL("page.app.spaces.space.overview", "spaceID", spaceID),
|
||||
}) {
|
||||
{ spaceName }
|
||||
}
|
||||
}
|
||||
@breadcrumb.Separator()
|
||||
@breadcrumb.Item() {
|
||||
@breadcrumb.Page() {
|
||||
{ leaf }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
templ accountChildBreadcrumb(spaceID, spaceName, accountID, accountName, leaf string) {
|
||||
@breadcrumb.Breadcrumb() {
|
||||
@breadcrumb.List() {
|
||||
@breadcrumb.Item() {
|
||||
@breadcrumb.Link(breadcrumb.LinkProps{
|
||||
Href: routeurl.URL("page.app.spaces.space.overview", "spaceID", spaceID),
|
||||
}) {
|
||||
{ spaceName }
|
||||
}
|
||||
}
|
||||
@breadcrumb.Separator()
|
||||
@breadcrumb.Item() {
|
||||
@breadcrumb.Link(breadcrumb.LinkProps{
|
||||
Href: routeurl.URL("page.app.spaces.space.accounts.account.overview", "spaceID", spaceID, "accountID", accountID),
|
||||
}) {
|
||||
{ accountName }
|
||||
}
|
||||
}
|
||||
@breadcrumb.Separator()
|
||||
@breadcrumb.Item() {
|
||||
@breadcrumb.Page() {
|
||||
{ leaf }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -12,6 +12,7 @@ import "git.juancwu.dev/juancwu/budgit/internal/ui/utils"
|
|||
|
||||
type SpaceAccountPageProps struct {
|
||||
SpaceID string
|
||||
SpaceName string
|
||||
AccountID string
|
||||
AccountName string
|
||||
AccountBalance decimal.Decimal
|
||||
|
|
@ -27,7 +28,7 @@ templ SpaceAccountPage(props SpaceAccountPageProps) {
|
|||
balanceTextClasses = append(balanceTextClasses, "text-red-600 dark:text-red-400")
|
||||
}
|
||||
}}
|
||||
@layouts.App("Space Account", spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID), spaceAccountSidebarContent(props.SpaceID, props.AccountID, props.AccountName)) {
|
||||
@layouts.AppWithBreadcrumb("Space Account", accountChildBreadcrumb(props.SpaceID, props.SpaceName, props.AccountID, props.AccountName, "Overview"), spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID), spaceAccountSidebarContent(props.SpaceID, props.AccountID)) {
|
||||
<div class="container px-6 py-8 mx-auto space-y-8">
|
||||
<div class="grid gap-4 grid-cols-1 md:grid-cols-12">
|
||||
@card.Card(card.Props{
|
||||
|
|
|
|||
|
|
@ -10,17 +10,19 @@ import "git.juancwu.dev/juancwu/budgit/internal/ui/components/icon"
|
|||
|
||||
type SpaceAccountSettingsPageProps struct {
|
||||
SpaceID string
|
||||
SpaceName string
|
||||
AccountID string
|
||||
AccountName string
|
||||
UpdateForm forms.UpdateAccountProps
|
||||
}
|
||||
|
||||
templ SpaceAccountSettingsPage(props SpaceAccountSettingsPageProps) {
|
||||
@layouts.App(
|
||||
@layouts.AppWithBreadcrumb(
|
||||
"Account Settings",
|
||||
accountChildBreadcrumb(props.SpaceID, props.SpaceName, props.AccountID, props.AccountName, "Settings"),
|
||||
spaceOverviewSidebarContent(),
|
||||
spaceSpecificSidebarContent(props.SpaceID),
|
||||
spaceAccountSidebarContent(props.SpaceID, props.AccountID, props.AccountName),
|
||||
spaceAccountSidebarContent(props.SpaceID, props.AccountID),
|
||||
) {
|
||||
<div class="container max-w-3xl px-6 py-8 mx-auto space-y-8">
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import "git.juancwu.dev/juancwu/budgit/internal/ui/components/pagination"
|
|||
|
||||
type SpaceAccountTransactionsPageProps struct {
|
||||
SpaceID string
|
||||
SpaceName string
|
||||
AccountID string
|
||||
AccountName string
|
||||
Transactions []*model.Transaction
|
||||
|
|
@ -22,7 +23,7 @@ type SpaceAccountTransactionsPageProps struct {
|
|||
}
|
||||
|
||||
templ SpaceAccountTransactionsPage(props SpaceAccountTransactionsPageProps) {
|
||||
@layouts.App("Transactions", spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID), spaceAccountSidebarContent(props.SpaceID, props.AccountID, props.AccountName)) {
|
||||
@layouts.AppWithBreadcrumb("Transactions", accountChildBreadcrumb(props.SpaceID, props.SpaceName, props.AccountID, props.AccountName, "Transactions"), spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID), spaceAccountSidebarContent(props.SpaceID, props.AccountID)) {
|
||||
<div class="container px-6 py-8 mx-auto space-y-8">
|
||||
<div class="flex items-start justify-between flex-wrap gap-4">
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ type SpaceCreateAccountPageProps struct {
|
|||
}
|
||||
|
||||
templ SpaceCreateAccountPage(props SpaceCreateAccountPageProps) {
|
||||
@layouts.App("Create Account", spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID)) {
|
||||
@layouts.AppWithBreadcrumb("Create Account", spaceChildBreadcrumb(props.SpaceID, props.SpaceName, "Create Account"), spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID)) {
|
||||
<div class="container max-w-3xl px-6 py-8 mx-auto space-y-8">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold">Create Account</h1>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,14 @@ import "git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
|
|||
|
||||
type SpaceCreateBillPageProps struct {
|
||||
SpaceID string
|
||||
SpaceName string
|
||||
AccountID string
|
||||
AccountName string
|
||||
Form forms.CreateBillProps
|
||||
}
|
||||
|
||||
templ SpaceCreateBillPage(props SpaceCreateBillPageProps) {
|
||||
@layouts.App("Pay Bills", spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID), spaceAccountSidebarContent(props.SpaceID, props.AccountID, props.AccountName)) {
|
||||
@layouts.AppWithBreadcrumb("Pay Bills", accountChildBreadcrumb(props.SpaceID, props.SpaceName, props.AccountID, props.AccountName, "Pay Bills"), spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID), spaceAccountSidebarContent(props.SpaceID, props.AccountID)) {
|
||||
<div class="container max-w-3xl px-6 py-8 mx-auto space-y-8">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold">Pay Bills</h1>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,14 @@ import "git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
|
|||
|
||||
type SpaceCreateDepositPageProps struct {
|
||||
SpaceID string
|
||||
SpaceName string
|
||||
AccountID string
|
||||
AccountName string
|
||||
Form forms.CreateDepositProps
|
||||
}
|
||||
|
||||
templ SpaceCreateDepositPage(props SpaceCreateDepositPageProps) {
|
||||
@layouts.App("Deposit Funds", spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID), spaceAccountSidebarContent(props.SpaceID, props.AccountID, props.AccountName)) {
|
||||
@layouts.AppWithBreadcrumb("Deposit Funds", accountChildBreadcrumb(props.SpaceID, props.SpaceName, props.AccountID, props.AccountName, "Deposit Funds"), spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID), spaceAccountSidebarContent(props.SpaceID, props.AccountID)) {
|
||||
<div class="container max-w-3xl px-6 py-8 mx-auto space-y-8">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold">Deposit Funds</h1>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ type SpaceOverviewProps struct {
|
|||
}
|
||||
|
||||
templ SpaceOverview(props SpaceOverviewProps) {
|
||||
@layouts.App("Space Overview", spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID)) {
|
||||
@layouts.AppWithBreadcrumb("Space Overview", spaceLeafBreadcrumb(props.SpaceName), spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID)) {
|
||||
<div class="container px-6 py-8 mx-auto">
|
||||
<div class="mb-8">
|
||||
<h1 class="text-3xl font-bold">{ props.SpaceName }</h1>
|
||||
|
|
@ -78,10 +78,10 @@ templ spaceSpecificSidebarContent(spaceID string) {
|
|||
}
|
||||
}
|
||||
|
||||
templ spaceAccountSidebarContent(spaceID, accountID, accountName string) {
|
||||
templ spaceAccountSidebarContent(spaceID, accountID string) {
|
||||
@sidebar.Group() {
|
||||
@sidebar.GroupLabel() {
|
||||
{ accountName }
|
||||
Account
|
||||
}
|
||||
@sidebar.Menu() {
|
||||
@sidebar.MenuItem() {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ type SpaceSettingsPageProps struct {
|
|||
}
|
||||
|
||||
templ SpaceSettingsPage(props SpaceSettingsPageProps) {
|
||||
@layouts.App("Space Settings", spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID)) {
|
||||
@layouts.AppWithBreadcrumb("Space Settings", spaceChildBreadcrumb(props.SpaceID, props.SpaceName, "Settings"), spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID)) {
|
||||
<div class="container max-w-3xl px-6 py-8 mx-auto space-y-8">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold">Space Settings</h1>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue