Move deploy button to footer

components/Footer.tsx

@@ -1,9 +1,13 @@
+import React from "react";
 import { useSnapshot } from "valtio";
 import Container from "./Container";
 import Box from "./Box";
 
 import LogText from "./LogText";
-import { state } from "../state";
+import { compileCode, state } from "../state";
+import { Play, Prohibit } from "phosphor-react";
+import Button from "./Button";
+import Heading from "./Heading";
 
 const Footer = () => {
   const snap = useSnapshot(state);
@@ -14,9 +18,31 @@ const Footer = () => {
         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"
           css={{
@@ -30,8 +56,6 @@ const Footer = () => {
             overflowY: "scroll",
             wordWrap: "break-word",
             py: 3,
-            px: 3,
-            m: 3,
           }}
         >
           {snap.logs?.map((log, index) => (
@@ -43,6 +67,24 @@ const Footer = () => {
             </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>
   );