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 logo from './logo.svg';
|
||||
import styled from 'styled-components';
|
||||
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() {
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<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>
|
||||
<S.Color className="color-list" baseColor="#ff0000"/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
Reference in New Issue