Adding Message component
This commit is contained in:
parent
7ef40cba9c
commit
5984f59063
@ -1,20 +1,15 @@
|
||||
import React from 'react';
|
||||
|
||||
import Message from './Message';
|
||||
|
||||
import GithubIcon from 'feather-icons/dist/icons/github.svg';
|
||||
import DownloadIcon from 'feather-icons/dist/icons/download.svg';
|
||||
import LinkIcon from 'feather-icons/dist/icons/link.svg';
|
||||
import ChevronsDownIcon from 'feather-icons/dist/icons/chevrons-down.svg';
|
||||
import ErrorIcon from 'feather-icons/dist/icons/alert-octagon.svg';
|
||||
|
||||
const App = () => <React.Fragment>
|
||||
<h1>React App</h1>
|
||||
<ul>
|
||||
<li><GithubIcon/>GitHub</li>
|
||||
<li><DownloadIcon/>Download</li>
|
||||
<li><LinkIcon/>Permalink</li>
|
||||
<li><ChevronsDownIcon/>Open</li>
|
||||
<li><ErrorIcon/>Error</li>
|
||||
</ul>
|
||||
</React.Fragment>;
|
||||
const App = () => <Message icon={ ErrorIcon } heading="React App">
|
||||
<p>Placeholder app content</p>
|
||||
</Message>;
|
||||
|
||||
export default App;
|
||||
|
13
src/componets/Message/index.js
Normal file
13
src/componets/Message/index.js
Normal 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;
|
20
src/componets/Message/style.css
Normal file
20
src/componets/Message/style.css
Normal 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;
|
||||
}
|
@ -1 +1,13 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
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'));
|
||||
|
@ -25,7 +25,7 @@ body {
|
||||
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%);
|
||||
box-shadow: 0 0 1rem var(--color-black);
|
||||
padding: 0 var(--content-margin);
|
||||
@ -33,7 +33,7 @@ body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#main h1 {
|
||||
:global(#main) h1 {
|
||||
font-family: 'Bangers', 'cursive';
|
||||
font-size: 4rem;
|
||||
font-weight: normal;
|
||||
@ -42,20 +42,20 @@ body {
|
||||
line-height: var(--header-height);
|
||||
}
|
||||
|
||||
#main a {
|
||||
:global(#main) a {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#main ul {
|
||||
:global(#main) ul {
|
||||
line-height: var(--header-height);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: var(--content-margin);
|
||||
}
|
||||
|
||||
#main li a:hover,
|
||||
#main li a:active {
|
||||
:global(#main) li a:hover,
|
||||
:global(#main) li a:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@ -84,15 +84,15 @@ li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.inline-list li {
|
||||
:global(.inline-list) li {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.inline-list li:after {
|
||||
:global(.inline-list) li:after {
|
||||
content: '//';
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.inline-list li:last-child:after {
|
||||
:global(.inline-list) li:last-child:after {
|
||||
content: '';
|
||||
}
|
||||
|
@ -88,7 +88,8 @@ module.exports = {
|
||||
options: {
|
||||
importLoaders: 1,
|
||||
minimize: true,
|
||||
sourceMap: true
|
||||
sourceMap: true,
|
||||
modules: true
|
||||
}
|
||||
},
|
||||
{
|
||||
|
Loading…
Reference in New Issue
Block a user