first banner implementation with mui

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;