add very basic skeleton

This commit is contained in:
Ray Elliott 2020-04-25 21:54:48 +01:00
parent 89f79c789e
commit 6f6fcd57d3
1 changed files with 50 additions and 15 deletions

View File

@ -1,24 +1,59 @@
import React from 'react'; import React from 'react';
import logo from './logo.svg'; import styled from 'styled-components';
import './App.css'; import './App.css';
const DEFAULT_SHADE_COUNT = 9;
// an object to hold our styled components
const S = {};
class Shade extends React.Component {
render() {
return (
<div className={this.props.className}>{this.props.color}</div>
);
}
}
S.Shade = styled(Shade)`
padding: 1rem 2rem;
background-color: ${props => props.color};
`;
class Color extends React.Component {
constructor(props) {
super(props);
this.state = {
baseColor: this.props.baseColor,
shades: [],
shadeCount: this.props.shadeCount ? this.props.shadeCount : DEFAULT_SHADE_COUNT,
}
for (let index = 0; index < this.state.shadeCount; index++) {
this.state.shades.push(this.props.baseColor);
}
}
render() {
return (
<ul className={this.props.className}>
{this.state.shades.map((shade, index) =>
<li key={index}><S.Shade color={shade} /></li>
)}
</ul>
);
}
}
S.Color = styled(Color)`
list-style: none;
padding: 0;
margin: 0;
`;
function App() { function App() {
return ( return (
<div className="App"> <div className="App">
<header className="App-header"> <S.Color className="color-list" baseColor="#ff0000"/>
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div> </div>
); );
} }