From 09c5aff1dafc13db4ac1b56954105976428e555d Mon Sep 17 00:00:00 2001
From: Valtteri Karesto <valtteri.karesto@gmail.com>
Date: Mon, 13 Dec 2021 17:25:58 +0200
Subject: [PATCH] Add deploy footer

---
 components/DeployFooter.tsx | 102 ++++++++++++++++++++++++++++++++++++
 1 file changed, 102 insertions(+)
 create mode 100644 components/DeployFooter.tsx

diff --git a/components/DeployFooter.tsx b/components/DeployFooter.tsx
new file mode 100644
index 0000000..8b80e61
--- /dev/null
+++ b/components/DeployFooter.tsx
@@ -0,0 +1,102 @@
+import React, { useRef, useLayoutEffect } from "react";
+import { useSnapshot } from "valtio";
+import { Play, Prohibit } from "phosphor-react";
+import useStayScrolled from "react-stay-scrolled";
+
+import Container from "./Container";
+import Box from "./Box";
+import LogText from "./LogText";
+import { compileCode, state } from "../state";
+import Button from "./Button";
+import Heading from "./Heading";
+
+const Footer = () => {
+  const snap = useSnapshot(state);
+  const logRef = useRef<HTMLPreElement>(null);
+  const { stayScrolled /*, scrollBottom*/ } = useStayScrolled(logRef);
+
+  useLayoutEffect(() => {
+    stayScrolled();
+  }, [snap.logs, stayScrolled]);
+
+  return (
+    <Box
+      as="footer"
+      css={{
+        display: "flex",
+        borderTop: "1px solid $mauve6",
+        background: "$mauve1",
+        position: "relative",
+      }}
+    >
+      <Container css={{ py: "$3", flexShrink: 1 }}>
+        <Heading
+          as="h3"
+          css={{ fontWeight: 300, m: 0, fontSize: "11px", color: "$mauve9" }}
+        >
+          DEVELOPMENT LOG
+        </Heading>
+        <Button
+          ghost
+          size="xs"
+          css={{
+            position: "absolute",
+            right: "$3",
+            top: "$2",
+            color: "$mauve10",
+          }}
+          onClick={() => {
+            state.logs = [];
+          }}
+        >
+          <Prohibit size="14px" />
+        </Button>
+        <Box
+          as="pre"
+          ref={logRef}
+          css={{
+            display: "flex",
+            flexDirection: "column",
+            width: "100%",
+            height: "160px",
+            fontSize: "13px",
+            fontWeight: "$body",
+            fontFamily: "$monospace",
+            overflowY: "auto",
+            wordWrap: "break-word",
+            py: 3,
+          }}
+        >
+          {snap.logs?.map((log, index) => (
+            <Box as="span" key={log.type + index}>
+              <LogText capitalize variant={log.type}>
+                {log.type}:{" "}
+              </LogText>
+              <LogText>{log.message}</LogText>
+            </Box>
+          ))}
+        </Box>
+        <Button
+          variant="primary"
+          uppercase
+          disabled={!snap.files.length}
+          isLoading={snap.compiling}
+          onClick={() => compileCode(snap.active)}
+          css={{
+            position: "absolute",
+            bottom: "$4",
+            left: "$4",
+            alignItems: "center",
+            display: "flex",
+            cursor: "pointer",
+          }}
+        >
+          <Play weight="bold" size="16px" />
+          Compile to Wasm
+        </Button>
+      </Container>
+    </Box>
+  );
+};
+
+export default Footer;