Add warning plugin. Add grommet-icons as dependency
This commit is contained in:
parent
fcc81cf7e5
commit
fde5018da8
|
@ -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",
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
import Mpd from "./mpd";
|
||||
import Weather from "./weather";
|
||||
import Warning from "./warning";
|
||||
export default {
|
||||
mpd: Mpd,
|
||||
weather: Weather,
|
||||
warning: Warning,
|
||||
};
|
||||
|
|
|
@ -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;
|
Loading…
Reference in New Issue