Adding Message

src/components/Message/index.js

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

src/components/Message/style.module.css

@@ -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);
+    }
+  }
+}

src/pages/index.js

@@ -1,8 +1,16 @@
 import React from 'react';
+import { Link } from 'gatsby';
 
 import Layout from 'components/Layout';
+import Message from 'components/Message';
 
 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>
 </Layout>;