From 1607c728bca19a003ca08b64b4d2afc73e4d1e2a Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Wed, 9 Mar 2022 14:00:02 -0300
Subject: first banner implementation with mui

---
 .../src/components/Banner.tsx                      | 41 ++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 packages/taler-wallet-webextension/src/components/Banner.tsx

(limited to 'packages/taler-wallet-webextension/src/components/Banner.tsx')

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;
-- 
cgit v1.2.3