Create ParseError component w/ docs

src/components/ParseError/ParseError.js

@@ -0,0 +1,61 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Typography, Paper, makeStyles, useTheme } from '@material-ui/core';
+import clsx from "clsx";
+
+export default function ParseError({ file_path, expected, got, line_num }){
+
+    const theme = useTheme();
+
+    const useStyles = makeStyles({
+        "Paper-root": {
+            overflow: "hidden"
+        },
+        "headerColor": {
+            backgroundColor: theme.palette.parse_error.main
+        },
+        "padding": {
+            padding: theme.spacing(1)
+        }
+
+    });
+    const classes = useStyles();
+
+    return(
+        <Paper classes={{root: classes["Paper-root"]}}>
+            <div className={clsx(classes.headerColor, classes.padding)}>
+                <Typography variant="body1">
+					Parsing Error
+				</Typography>
+            </div>
+            <div className={classes.padding}>
+				<Typography variant="body1">
+					<b>File Path:</b> {file_path}
+				</Typography>
+				<Typography variant="body1">
+					<b>Line:</b> {line_num}
+				</Typography>
+				<Typography variant="body1">
+					<b>Expected:</b> {expected}
+				</Typography>
+				<Typography variant="body1">
+					<b>Got:</b> {got}
+				</Typography>
+            </div>
+        </Paper>
+    );
+}
+
+ParseError.propTypes = {
+	"file_path": PropTypes.string, 
+	"expected": PropTypes.string,
+	"got": PropTypes.string,
+	"line_num": PropTypes.number
+};
+
+ParseError.defaultProps = {
+    "file_path": "", 
+	"expected": "",
+	"got": "",
+	"line_num": ""
+};

src/components/ParseError/ParseError.md

@@ -0,0 +1,36 @@
+Displays a parsing error.
+
+---
+
+```jsx
+import { ThemeProvider } from "@material-ui/core/styles";
+import webqueue2Theme from "../../theme";
+import ParseError from "./ParseError";
+
+const theme = webqueue2Theme(false);
+
+const demo_data = {
+	"type": "parse_error",
+	"datetime": "2020-10-23T00:45:32",
+	"file_path": "/home/pier/e/campb303/webqueue2/q-snapshot/ce/32",
+	"expected": "Did not encounter a reply-from-user ending delimiter",
+	"got": "765-869-4032 to assist please?\tThank you\n",
+	"line_num": 120
+};
+
+<ThemeProvider theme={theme}>
+	<ParseError 
+		file_path={demo_data.file_path}  
+		expected={demo_data.expected}
+		got={demo_data.got}
+		line_num={demo_data.line_num}
+	/> </ThemeProvider>
+```
+```jsx static
+<ParseError 
+	file_path={demo_data.file_path}  
+	expected={demo_data.expected}
+	got={demo_data.got}
+	line_num={demo_data.line_num}
+/>
+```

src/components/ParseError/index.js

@@ -0,0 +1 @@
+export { default } from "./ParseError";