Job View

src/views/components/JobLogView.jsx

@@ -0,0 +1,60 @@
+import { useContext, useState, useEffect } from "react";
+import JobContext from "../../ctx/JobContext.jsx";
+
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Skeleton from "@mui/material/Skeleton";
+import Stack from "@mui/material/Stack";
+
+export default function JobLogView(props) {
+  const { log } = props;
+
+  const LoadingDot = () => (<Skeleton variant="circular" width={16} height={16} sx={{backgroundColor:"rgb(240,240,240)"}}/>)
+  
+  return (
+    <Box
+      style={{
+        background: "black",
+        color: "white",
+        padding: "1rem 0.5rem",
+        wordBreak: "break-all",
+      }}
+    >
+      {log.map((l, i) => (
+        <Box className="line" key={i} sx={{margin: ".25rem 0px"}}>
+          <Typography
+            variant="body2"
+            component="div"
+            sx={{ display: "flex", overflowWrap: "anywhere" }}
+          >
+            <Box
+              className="line-number"
+              sx={{
+                display: "flex",
+                margin: "0px 0.5rem",
+                color: "rgb(210,210,210)",
+
+                justifyContent:"center",
+                minWidth:"2rem"
+              }}
+            >
+              {i + 1}
+            </Box>
+            <Box
+              className="line-content"
+              sx={{ display: "flex", mr: ".5rem", color: "rgb(240,240,240)" }}
+            >
+              {" "}
+              {l}
+            </Box>
+          </Typography>
+        </Box>
+      ))}
+      <Stack direction="row" spacing={1} sx={{mt:".5rem", ml:"0.75rem"}}>
+        <LoadingDot/>
+        <LoadingDot/>
+        <LoadingDot/>
+      </Stack>
+    </Box>
+  );
+}