diff --git a/src/components/Edit/Edit.js b/src/components/Edit/Edit.js new file mode 100644 index 0000000..690ca35 --- /dev/null +++ b/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( + +
+ {by} added an edit +
+
+ {content.map((line) => ( + line === "\n" ?
: {line} + ))} +
+
+ ); +} + +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 +} \ No newline at end of file diff --git a/src/components/Edit/Edit.md b/src/components/Edit/Edit.md new file mode 100644 index 0000000..c3643f4 --- /dev/null +++ b/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); + + + + +``` + +```jsx static + +``` \ No newline at end of file diff --git a/src/components/Edit/index.js b/src/components/Edit/index.js new file mode 100644 index 0000000..912ccd5 --- /dev/null +++ b/src/components/Edit/index.js @@ -0,0 +1 @@ +export { default } from "./Edit"; \ No newline at end of file