diff options
author | Sebastian <sebasjm@gmail.com> | 2021-08-19 00:34:47 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-08-19 00:35:21 -0300 |
commit | 97a05ff659af274dcfcd9c76bf19100bbd51ce0e (patch) | |
tree | 9cce837ec9a5ec06279dc48eac75e1993ede983f /packages/taler-wallet-webextension/src/NavigationBar.tsx | |
parent | b015f76e7268cb5caff14a0ed88cb5e8fa53dc2e (diff) | |
download | wallet-core-97a05ff659af274dcfcd9c76bf19100bbd51ce0e.tar.xz |
new wallet history and view refactoring
Diffstat (limited to 'packages/taler-wallet-webextension/src/NavigationBar.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/NavigationBar.tsx | 91 |
1 files changed, 91 insertions, 0 deletions
diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx b/packages/taler-wallet-webextension/src/NavigationBar.tsx new file mode 100644 index 000000000..e07032d0a --- /dev/null +++ b/packages/taler-wallet-webextension/src/NavigationBar.tsx @@ -0,0 +1,91 @@ +/* + This file is part of TALER + (C) 2016 GNUnet e.V. + + TALER is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + TALER is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +/** + * Popup shown to the user when they click + * the Taler browser action button. + * + * @author Florian Dold + */ + +/** + * Imports. + */ +import { i18n } from "@gnu-taler/taler-util"; +import { ComponentChildren, JSX } from "preact"; +import Match from "preact-router/match"; +import { useDevContext } from "./context/devContext"; +import { PopupNavigation } from './components/styled' + +export enum Pages { + welcome = '/welcome', + balance = '/balance', + settings = '/settings', + dev = '/dev', + backup = '/backup', + history = '/history', + transaction = '/transaction/:tid', + provider_detail = '/provider/:pid', + provider_add = '/provider/add', + + reset_required = '/reset-required', + payback = '/payback', + return_coins = '/return-coins', + + pay = '/pay', + refund = '/refund', + tips = '/tips', + withdraw = '/withdraw', +} + +interface TabProps { + target: string; + current?: string; + children?: ComponentChildren; +} + +function Tab(props: TabProps): JSX.Element { + let cssClass = ""; + if (props.current?.startsWith(props.target)) { + cssClass = "active"; + } + return ( + <a href={props.target} class={cssClass}> + {props.children} + </a> + ); +} + +export function NavBar({ devMode, path }: { path: string, devMode: boolean }) { + return <PopupNavigation devMode={devMode}> + <div> + <Tab target="/balance" current={path}>{i18n.str`Balance`}</Tab> + <Tab target="/history" current={path}>{i18n.str`History`}</Tab> + <Tab target="/backup" current={path}>{i18n.str`Backup`}</Tab> + <Tab target="/settings" current={path}>{i18n.str`Settings`}</Tab> + {devMode && <Tab target="/dev" current={path}>{i18n.str`Dev`}</Tab>} + </div> + </PopupNavigation> +} + +export function WalletNavBar() { + const { devMode } = useDevContext() + return <Match>{({ path }: any) => { + console.log("path", path) + return <NavBar devMode={devMode} path={path} /> + }}</Match> +} + |