Adding Message

This commit is contained in:
Jeff Avallone 2019-01-03 18:01:01 -05:00
parent a7ebcd92bf
commit 533475e613
3 changed files with 135 additions and 0 deletions

View File

@ -0,0 +1,55 @@
import React from 'react';
import PropTypes from 'prop-types';
import style from './style.module.css';
import InfoIcon from 'react-feather/dist/icons/info';
import ErrorIcon from 'react-feather/dist/icons/alert-octagon';
import WarningIcon from 'react-feather/dist/icons/alert-triangle';
const iconTypes = {
info: InfoIcon,
error: ErrorIcon,
warning: WarningIcon
};
const renderIcon = (type, icon) => {
const Icon = icon || iconTypes[type];
if (!Icon) {
return;
}
return <Icon />;
};
const Message = ({ type, icon, heading, children }) => (
<div className={ [style.message, type && style[type] ].filter(Boolean).join(' ') }>
<div className={ style.header }>
{ renderIcon(type, icon) }
<h2>{ heading }</h2>
</div>
<div className={ style.content }>
{ children }
</div>
</div>
);
Message.propTypes = {
type: PropTypes.oneOf([
'info',
'error',
'warning'
]),
icon: PropTypes.oneOfType([
PropTypes.element,
PropTypes.func
]),
heading: PropTypes.string.isRequired,
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
]).isRequired
};
export default Message;

View File

@ -0,0 +1,72 @@
@import url('../../globals.module.css');
.message {
background: var(--color-tan);
color: var(--color-black);
margin: var(--spacing-margin) 0;
box-shadow: 0 0 1rem color(var(--color-black) alpha(0.7));
}
.header {
& h2 {
display: inline-block;
padding: var(--spacing-margin);
line-height: 2.8rem;
margin: 0;
}
& svg {
padding: var(--spacing-margin);
height: 2.8rem;
width: 2.8rem;
vertical-align: bottom;
}
}
.content {
padding: var(--spacing-margin);
& p {
margin-top: 0;
margin-bottom: var(--spacing-margin);
}
& p:last-child {
margin-bottom: 0;
}
}
.error {
& .header {
background: var(--color-red);
color: var(--color-white);
& svg {
background: var(--color-white);
color: var(--color-red);
}
}
}
.warning {
& .header {
background: var(--color-orange);
& svg {
background: var(--color-black);
color: var(--color-orange);
}
}
}
.info {
& .header {
background: var(--color-blue);
color: var(--color-white);
& svg {
background: var(--color-white);
color: var(--color-blue);
}
}
}

View File

@ -1,8 +1,16 @@
import React from 'react'; import React from 'react';
import { Link } from 'gatsby';
import Layout from 'components/Layout'; import Layout from 'components/Layout';
import Message from 'components/Message';
const IndexPage = () => <Layout> const IndexPage = () => <Layout>
<noscript>
<Message type="error" heading="JavaScript Required">
<p>You need JavaScript to use Regexper.</p>
<p>If you have concerns regarding the use of tracking code on Regexper, please see the <Link to="/privacy">Privacy Policy</Link>.</p>
</Message>
</noscript>
<div>Hello world</div> <div>Hello world</div>
</Layout>; </Layout>;