Create Edit component w/ docs

src/components/Edit/Edit.js

@@ -0,0 +1,46 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Typography, Paper, makeStyles, useTheme } from '@material-ui/core';
+import clsx from "clsx";
+import RelativeTime from "react-relative-time";
+
+export default function Edit({ datetime, by, content }){
+
+    const theme = useTheme();
+
+    const useStyles = makeStyles({
+        "Paper-root": {
+            overflow: "hidden"
+        },
+        "headerColor": {
+            backgroundColor: theme.palette.edit.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"><b>{by}</b> added an edit <RelativeTime value={datetime} /></Typography>
+            </div>
+            <div className={classes.padding}>
+                {content.map((line) => (
+                    line === "\n" ? <br /> : <Typography variant="body1">{line}</Typography>
+                ))}
+            </div>
+        </Paper>
+    );
+}
+
+Edit.propTypes = {
+    /** ISO 8601 formatted time string. */
+    "datetime": PropTypes.string.isRequired,
+    /** The name of the person who added the edit. */
+    "by": PropTypes.string.isRequired,
+    /** An array of strings containing the content of the edit. */
+    "content": PropTypes.array.isRequired
+}

src/components/Edit/Edit.md

@@ -0,0 +1,29 @@
+Renders a message box style representation of an edit.
+
+```jsx
+import { ThemeProvider } from "@material-ui/core/styles";
+import webqueue2Theme from "../../theme";
+import Edit from "./Edit";
+
+const theme = webqueue2Theme(false);
+
+<ThemeProvider theme={theme}>
+    <Edit 
+        by="campb303"
+        datetime="2020-06-23T13:27:56"
+        content={[
+            "This be an edit my boy\n"
+        ]}
+    />
+</ThemeProvider>
+```
+
+```jsx static
+<Edit 
+    by="campb303"
+    datetime="2020-06-23T13:27:56"
+    content={[
+        "This be an edit my boy\n"
+    ]}
+/>
+```

src/components/Edit/index.js

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