Add warning plugin. Add grommet-icons as dependency
This commit is contained in:
@@ -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
32
src/plugins/warning.js
Normal 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;
|
||||
Reference in New Issue
Block a user