Operating checking · Updated moments ago
open System open FSharp.ViewEngine open Acme.Components.Primitives open Acme.Components.Application open type Html open type Svg open type Datastar type ShellDestination = | LedgerHome | LedgerAccounts | LedgerAccount of int | LedgerTransaction of int | LedgerCreateAccount | LedgerReports | LedgerSettings | TreasuryHome | TreasuryPeriod of string | TreasuryTransactions | TreasuryPayees | TreasuryAccounts let private shellDestinationKey = function | LedgerHome -> "ledger-home" | LedgerAccounts -> "ledger-accounts" | LedgerAccount id -> $"ledger-account-{id}" | LedgerTransaction id -> $"ledger-transaction-{id}" | LedgerCreateAccount -> "ledger-create-account" | LedgerReports -> "ledger-reports" | LedgerSettings -> "ledger-settings" | TreasuryHome -> "treasury-home" | TreasuryPeriod region -> $"treasury-period-{region.ToLowerInvariant()}" | TreasuryTransactions -> "treasury-transactions" | TreasuryPayees -> "treasury-payees" | TreasuryAccounts -> "treasury-accounts" let shellDestinationUrl destination = $"/components/page-examples/account-management?destination={shellDestinationKey destination}" let private refreshIcon = raw """<svg viewBox="0 0 20 20" fill="currentColor" class="size-4"><path fill-rule="evenodd" d="M15.312 4.683A7.25 7.25 0 1 0 17.25 10a.75.75 0 0 0-1.5 0 5.75 5.75 0 1 1-1.604-3.982H12.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 .75-.75v-3.5a.75.75 0 0 0-1.5 0v1.415Z" clip-rule="evenodd"/></svg>""" let private refreshBalancesAction = ApplicationAction.command "$ledgerRefreshes++" "Refresh balances" |> ApplicationAction.withVariant ButtonVariant.Primary |> ApplicationAction.asIconOnly refreshIcon let private pageAction destination label = ApplicationAction.link destination label // Breadcrumbs are optional content, not a built-in heading. let accountPageHeader = PageHeader.create "Account 2048" |> PageHeader.withSubtitle "Operating checking · Updated moments ago" |> PageHeader.withActions ( ActionCluster.create "account-2048-actions" [ refreshBalancesAction pageAction LedgerReports "View reports" ] |> ActionCluster.withOverflow [ MenuItem.link LedgerSettings "Account settings" ]) let pageHeaderExample = div { _dataSignals "{ledgerRefreshes: 0}" accountPageHeader |> PageHeader.render shellDestinationUrl output { _class "sr-only"; _role "status"; _dataText "'Balance refreshes: ' + $ledgerRefreshes"; "Balance refreshes: 0" } }