Add warning plugin. Add grommet-icons as dependency

This commit is contained in:
Ceda EI 2020-12-21 15:43:25 +05:30
parent fcc81cf7e5
commit fde5018da8
3 changed files with 35 additions and 0 deletions

View File

@ -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",

View File

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

32
src/plugins/warning.js Normal file
View File

@ -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;