Create CurrentBreakPoint component w/ docs

src/components/CurrentBreakPoint/CurrentBreakPoint.js

@@ -0,0 +1,46 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useTheme, useMediaQuery, makeStyles } from '@material-ui/core';
+
+export default function CurrentBreakPoint(){
+    const theme = useTheme();
+    const useStyles = makeStyles({
+        true: {
+            color: theme.palette.success.main
+        },
+        false: {
+            color: theme.palette.error.main
+        }
+    });
+    const classes = useStyles();
+
+    const mediaQueries = {
+        "xs": useMediaQuery(theme.breakpoints.up('xs')),
+        "sm": useMediaQuery(theme.breakpoints.up('sm')),
+        "md": useMediaQuery(theme.breakpoints.up('md')),
+        "lg": useMediaQuery(theme.breakpoints.up('lg')),
+        "xl": useMediaQuery(theme.breakpoints.up('xl')),
+    }
+
+    return (
+        <p style={{ margin: "0px" }}>
+            { Object.keys(mediaQueries).map( (key) => {
+                console.log("Key: ", key)
+                console.log("Value: ", mediaQueries.key)
+                return(
+                    <span className={ mediaQueries[key] ? classes.true : classes.false }>
+                        {`${key.toUpperCase()}: ${ mediaQueries[key] ? "true" : "false"}\n\n\n\n`}
+                    </span>
+                )
+            })}
+        </p>
+    );
+}
+
+CurrentBreakPoint.propTypes = {
+
+};
+
+CurrentBreakPoint.defaultProps = {
+
+};

src/components/CurrentBreakPoint/CurrentBreakPoint.md

@@ -0,0 +1,30 @@
+Displays the MUI theme breakpoints and whether or not they are active. This is a utility component meant to make UI development easier, not as a UI element for production code.
+
+It must be used under a [ThemeProvider](https://material-ui.com/styles/api/#themeprovider).
+
+---
+
+```jsx
+import { ThemeProvider } from '@material-ui/core/styles';
+import { Paper, makeStyles } from '@material-ui/core';
+import webqueue2Theme from "../../theme.js";
+import CurrentBreakPoint from "./CurrentBreakPoint";
+
+const theme = webqueue2Theme(false);
+
+const useStyles = makeStyles({
+    paperPadding: {
+        padding: theme.spacing(1)
+    }
+});
+const classes = useStyles();
+
+<ThemeProvider theme={theme}>
+    <Paper classes={{ root: classes.paperPadding }}>
+        <CurrentBreakPoint />
+    </Paper>
+</ThemeProvider>
+```
+```jsx static
+<CurrentBreakPoint />
+```

src/components/CurrentBreakPoint/index.js

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