Move page structure of warning into GenericPageWithIcon
This commit is contained in:
parent
fde5018da8
commit
cae5d1c95a
|
@ -0,0 +1,32 @@
|
|||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { Box, Button, Heading, Text } from "grommet";
|
||||
|
||||
function GenericPageWithIcon(props) {
|
||||
return (
|
||||
<Box
|
||||
align="center"
|
||||
background="light-1"
|
||||
width="100vw"
|
||||
justify="center"
|
||||
direction="column"
|
||||
alignContent="center"
|
||||
height="100vh"
|
||||
>
|
||||
{props.icon}
|
||||
<Heading>{props.title}</Heading>
|
||||
<Text>{props.description}</Text>
|
||||
<Button primary size="large" onClick={props.close}
|
||||
label="Dismiss" margin="1.5em" />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
GenericPageWithIcon.propTypes = {
|
||||
title: PropTypes.string,
|
||||
description: PropTypes.string,
|
||||
icon: PropTypes.node,
|
||||
close: PropTypes.func
|
||||
};
|
||||
|
||||
export default GenericPageWithIcon;
|
|
@ -1,25 +1,15 @@
|
|||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { Box, Button, Heading, Text } from "grommet";
|
||||
import GenericPageWithIcon from "./GenericPageWithIcon";
|
||||
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>
|
||||
);
|
||||
<GenericPageWithIcon
|
||||
title={props.data.title}
|
||||
description={props.data.description}
|
||||
icon={<Alert color="#D0C100" size="xlarge" />}
|
||||
/>);
|
||||
}
|
||||
|
||||
Warning.propTypes = {
|
||||
|
|
Loading…
Reference in New Issue