diff options
author | Sebastian <sebasjm@gmail.com> | 2022-03-11 02:17:40 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-03-11 11:15:06 -0300 |
commit | 4d66f774c3ad4040f522d2ec52b5b4c2edd2b478 (patch) | |
tree | b73ce595926f6db58a206968666e7d3a0978feaf /packages/taler-wallet-webextension/src/components/Banner.tsx | |
parent | 2150f3d96b25772dd608e245cd3508f857478c5b (diff) | |
download | wallet-core-4d66f774c3ad4040f522d2ec52b5b4c2edd2b478.tar.xz |
pending operations
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/Banner.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/Banner.tsx | 83 |
1 files changed, 38 insertions, 45 deletions
diff --git a/packages/taler-wallet-webextension/src/components/Banner.tsx b/packages/taler-wallet-webextension/src/components/Banner.tsx index f6af81184..09dfac816 100644 --- a/packages/taler-wallet-webextension/src/components/Banner.tsx +++ b/packages/taler-wallet-webextension/src/components/Banner.tsx @@ -1,64 +1,57 @@ -import { h, Fragment, VNode } from "preact"; +import { h, Fragment, VNode, JSX } from "preact"; import { Divider } from "../mui/Divider"; import { Button } from "../mui/Button"; import { Typography } from "../mui/Typography"; import { Avatar } from "../mui/Avatar"; import { Grid } from "../mui/Grid"; import { Paper } from "../mui/Paper"; -import { Icon } from "./styled"; -import settingsIcon from "../../static/img/settings_black_24dp.svg"; -// & > a > div.settings-icon { -// mask: url(${settingsIcon}) no-repeat center; -// background-color: white; -// width: 24px; -// height: 24px; -// margin-left: auto; -// margin-right: 8px; -// padding: 4px; -// } -// & > a.active { -// background-color: #f8faf7; -// color: #0042b2; -// font-weight: bold; -// } -// & > a.active > div.settings-icon { -// background-color: #0042b2; -// } -function SignalWifiOffIcon({ ...rest }: any): VNode { - return <Icon {...rest} />; +interface Props extends JSX.HTMLAttributes<HTMLDivElement> { + title?: string; + elements: { + icon?: VNode; + description: VNode; + }[]; + confirm?: { + label: string; + action: () => void; + }; } -export function Banner({}: {}) { +export function Banner({ title, elements, confirm, ...rest }: Props) { return ( <Fragment> - <Paper elevation={3} /*className={classes.paper}*/> - <Grid - container - // wrap="nowrap" - // spacing={10} - alignItems="center" - columns={3} - > - <Grid item xs={1}> - <Avatar> - <SignalWifiOffIcon style={{ backgroundColor: "red" }} /> - </Avatar> - </Grid> - <Grid item xs={1}> - <Typography> - You have lost connection to the internet. This app is offline. - </Typography> + <Paper elevation={0} {...rest}> + {title && ( + <Grid container> + <Grid item> + <Typography>{title}</Typography> + </Grid> </Grid> + )} + <Grid container wrap="nowrap" spacing={1} alignItems="center"> + {elements.map((e, i) => ( + <Fragment key={i}> + {e.icon && ( + <Grid item> + <Avatar>{e.icon}</Avatar> + </Grid> + )} + <Grid item>{e.description}</Grid> + </Fragment> + ))} </Grid> - <Grid container justifyContent="flex-end" spacing={8} columns={3}> - <Grid item xs={1}> - <Button color="primary">Turn on wifi</Button> + {confirm && ( + <Grid container justifyContent="flex-end" spacing={8}> + <Grid item> + <Button color="primary" onClick={confirm.action}> + {confirm.label} + </Button> + </Grid> </Grid> - </Grid> + )} </Paper> <Divider /> - {/* <CssBaseline /> */} </Fragment> ); } |