add very basic skeleton
This commit is contained in:
parent
89f79c789e
commit
6f6fcd57d3
65
src/App.js
65
src/App.js
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Reference in New Issue