104 lines
2.6 KiB
TypeScript
104 lines
2.6 KiB
TypeScript
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 } from "../state/actions";
|
|
import 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;
|