Add warning plugin. Add grommet-icons as dependency

package.json

@@ -8,6 +8,7 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "grommet": "^2.16.2",
+    "grommet-icons": "^4.5.0",
     "polished": "^4.0.5",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

src/plugins/index.js

@@ -1,6 +1,8 @@
 import Mpd from "./mpd";
 import Weather from "./weather";
+import Warning from "./warning";
 export default {
 	mpd: Mpd,
 	weather: Weather,
+	warning: Warning,
 };

src/plugins/warning.js

@@ -0,0 +1,32 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Box, Button, Heading, Text } from "grommet";
+import { Alert } from "grommet-icons";
+
+function Warning(props) {
+	return (
+		<Box
+			align="center"
+			background="light-1"
+			width="100vw"
+			justify="center"
+			direction="column"
+			alignContent="center"
+			height="100vh"
+		>
+			<Alert color="#D0C100" size="xlarge" />
+			<Heading>{props.data.title}</Heading>
+			<Text>{props.data.description}</Text>
+			<Button primary size="large" onClick={props.close} label="Dismiss" margin="1em"/>
+		</Box>
+	);
+}
+
+Warning.propTypes = {
+	data: PropTypes.object,
+	close: PropTypes.func
+};
+
+Warning.pluginName = "Warning";
+
+export default Warning;