diff options
author | Sebastian <sebasjm@gmail.com> | 2022-03-09 14:00:02 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-03-09 14:00:02 -0300 |
commit | 1607c728bca19a003ca08b64b4d2afc73e4d1e2a (patch) | |
tree | a02fc28342cf343cf91b182955cc903915989478 /packages/taler-wallet-webextension/src/components | |
parent | 6bc244cc1e0e08c4d86161fdf2b6a52b3f9f452e (diff) |
first banner implementation with mui
Diffstat (limited to 'packages/taler-wallet-webextension/src/components')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/Banner.tsx | 41 |
1 files changed, 41 insertions, 0 deletions
diff --git a/packages/taler-wallet-webextension/src/components/Banner.tsx b/packages/taler-wallet-webextension/src/components/Banner.tsx new file mode 100644 index 000000000..6ff7b1019 --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/Banner.tsx @@ -0,0 +1,41 @@ +import { h, Fragment, VNode } from "preact"; +import { Divider } from "../mui/Divider"; +import { Button } from "./styled/index.js"; +import { Typography } from "../mui/Typography"; +import { Avatar } from "../mui/Avatar"; +import { Grid } from "../mui/Grid"; +import { Paper } from "../mui/Paper"; + +function SignalWifiOffIcon(): VNode { + return <Fragment />; +} + +function Banner({}: {}) { + return ( + <Fragment> + <Paper elevation={0} /*className={classes.paper}*/> + <Grid container wrap="nowrap" spacing={16} alignItems="center"> + <Grid item> + <Avatar /*className={classes.avatar}*/> + <SignalWifiOffIcon /> + </Avatar> + </Grid> + <Grid item> + <Typography> + You have lost connection to the internet. This app is offline. + </Typography> + </Grid> + </Grid> + <Grid container justify="flex-end" spacing={8}> + <Grid item> + <Button color="primary">Turn on wifi</Button> + </Grid> + </Grid> + </Paper> + <Divider /> + {/* <CssBaseline /> */} + </Fragment> + ); +} + +export default Banner; |