Add terminal output component

bryphe-coder · bryphe-coder · commit 6430217fcca6 · 2022-02-04T18:26:09.000Z
diff --git a/site/components/TerminalOutput/index.tsx b/site/components/TerminalOutput/index.tsx
@@ -0,0 +1,38 @@
+import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
+
+interface Props {
+  output: string[]
+}
+
+export const TerminalOutput: React.FC<Props> = ({ className, output }) => {
+  const styles = useStyles()
+
+  return (
+    <div className={styles.root}>
+      {output.map((line, idx) => (
+        <div className={styles.line} key={idx}>
+          {line}
+        </div>
+      ))}
+    </div>
+  )
+}
+const MONOSPACE_FONT_FAMILY =
+  "'Fira Code', 'Lucida Console', 'Lucida Sans Typewriter', 'Liberation Mono', 'Monaco', 'Courier New', Courier, monospace"
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    minHeight: 156,
+    background: theme.palette.background.default,
+    //color: theme.palette.codeBlock.contrastText,
+    fontFamily: MONOSPACE_FONT_FAMILY,
+    fontSize: 13,
+    wordBreak: "break-all",
+    padding: theme.spacing(2),
+    borderRadius: theme.shape.borderRadius,
+  },
+  line: {
+    whiteSpace: "pre-wrap",
+  },
+}))
