Adding Message component

This commit is contained in:
Jeff Avallone 2018-02-10 17:20:04 -05:00
parent 7ef40cba9c
commit 5984f59063
6 changed files with 61 additions and 20 deletions

View File

@ -1,20 +1,15 @@
import React from 'react'; import React from 'react';
import Message from './Message';
import GithubIcon from 'feather-icons/dist/icons/github.svg'; import GithubIcon from 'feather-icons/dist/icons/github.svg';
import DownloadIcon from 'feather-icons/dist/icons/download.svg'; import DownloadIcon from 'feather-icons/dist/icons/download.svg';
import LinkIcon from 'feather-icons/dist/icons/link.svg'; import LinkIcon from 'feather-icons/dist/icons/link.svg';
import ChevronsDownIcon from 'feather-icons/dist/icons/chevrons-down.svg'; import ChevronsDownIcon from 'feather-icons/dist/icons/chevrons-down.svg';
import ErrorIcon from 'feather-icons/dist/icons/alert-octagon.svg'; import ErrorIcon from 'feather-icons/dist/icons/alert-octagon.svg';
const App = () => <React.Fragment> const App = () => <Message icon={ ErrorIcon } heading="React App">
<h1>React App</h1> <p>Placeholder app content</p>
<ul> </Message>;
<li><GithubIcon/>GitHub</li>
<li><DownloadIcon/>Download</li>
<li><LinkIcon/>Permalink</li>
<li><ChevronsDownIcon/>Open</li>
<li><ErrorIcon/>Error</li>
</ul>
</React.Fragment>;
export default App; export default App;

View File

@ -0,0 +1,13 @@
import React from 'react';
import style from './style.css';
const Message = ({ icon, heading, children }) => {
const IconComponent = icon;
return <div className={ style.message }>
<h2>{ IconComponent ? <IconComponent/> : '' }{ heading }</h2>
{ children }
</div>;
};
export default Message;

View File

@ -0,0 +1,20 @@
.message {
background: var(--color-tan);
padding: var(--spacing-margin);
margin: var(--spacing-margin) 0;
}
.message h2 {
margin: var(--spacing-margin) 0;
}
.message h2 svg {
margin-right: 0.5rem;
height: 3rem;
width: 3rem;
vertical-align: bottom;
}
.message p {
margin: var(--spacing-margin) 0;
}

View File

@ -1 +1,13 @@
import React from 'react';
import ReactDOM from 'react-dom';
import '../style.css'; import '../style.css';
import Message from '../componets/Message';
import ErrorIcon from 'feather-icons/dist/icons/alert-octagon.svg';
ReactDOM.render(
<Message icon={ ErrorIcon } heading="404 Page Not Found">
<p>The page you have requested could not be found</p>
</Message>,
document.getElementById('root'));

View File

@ -25,7 +25,7 @@ body {
font-size: 1.6rem; font-size: 1.6rem;
} }
#main { :global(#main) {
background: var(--color-green) linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); background: var(--color-green) linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
box-shadow: 0 0 1rem var(--color-black); box-shadow: 0 0 1rem var(--color-black);
padding: 0 var(--content-margin); padding: 0 var(--content-margin);
@ -33,7 +33,7 @@ body {
position: relative; position: relative;
} }
#main h1 { :global(#main) h1 {
font-family: 'Bangers', 'cursive'; font-family: 'Bangers', 'cursive';
font-size: 4rem; font-size: 4rem;
font-weight: normal; font-weight: normal;
@ -42,20 +42,20 @@ body {
line-height: var(--header-height); line-height: var(--header-height);
} }
#main a { :global(#main) a {
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
} }
#main ul { :global(#main) ul {
line-height: var(--header-height); line-height: var(--header-height);
position: absolute; position: absolute;
top: 0; top: 0;
right: var(--content-margin); right: var(--content-margin);
} }
#main li a:hover, :global(#main) li a:hover,
#main li a:active { :global(#main) li a:active {
text-decoration: underline; text-decoration: underline;
} }
@ -84,15 +84,15 @@ li {
display: inline-block; display: inline-block;
} }
.inline-list li { :global(.inline-list) li {
white-space: nowrap; white-space: nowrap;
} }
.inline-list li:after { :global(.inline-list) li:after {
content: '//'; content: '//';
padding: 0 0.5rem; padding: 0 0.5rem;
} }
.inline-list li:last-child:after { :global(.inline-list) li:last-child:after {
content: ''; content: '';
} }

View File

@ -88,7 +88,8 @@ module.exports = {
options: { options: {
importLoaders: 1, importLoaders: 1,
minimize: true, minimize: true,
sourceMap: true sourceMap: true,
modules: true
} }
}, },
{ {