First github Commit

frontend/src/pages/WhatsAuth/components/Bateryinfo.js

@@ -0,0 +1,34 @@
+import React from "react";
+import Link from "@material-ui/core/Link";
+import { makeStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+
+const useStyles = makeStyles({
+	main: {
+		flex: 1,
+	},
+});
+
+const Bateryinfo = ({ session }) => {
+	const classes = useStyles();
+	return (
+		<React.Fragment>
+			<Typography component="h2" variant="h6" color="primary" gutterBottom>
+				Bateria
+			</Typography>
+			<Typography component="p" variant="h6">
+				{(session && session.baterry) || "Não disponível"}
+			</Typography>
+			<Typography color="textSecondary" className={classes.main}>
+				Carregando: {(session && session.plugged) || "Não disponível"}
+			</Typography>
+			<div>
+				<Link color="primary" href="#">
+					Verificar bateria
+				</Link>
+			</div>
+		</React.Fragment>
+	);
+};
+
+export default Bateryinfo;

frontend/src/pages/WhatsAuth/components/Qrcode.js

@@ -0,0 +1,25 @@
+import React from "react";
+import QRCode from "qrcode.react";
+import { makeStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+
+const useStyles = makeStyles({
+	main: {
+		flex: 1,
+	},
+});
+
+const Qrcode = ({ qrCode }) => {
+	const classes = useStyles();
+
+	return (
+		<div>
+			<Typography component="h2" variant="h6" color="primary" gutterBottom>
+				Leia o QrCode para iniciar a sessão
+			</Typography>
+			<QRCode value={qrCode} size={256} />
+		</div>
+	);
+};
+
+export default Qrcode;