use nice-color-palettes to generate palettes
This commit is contained in:
parent
fef8511daf
commit
953a189588
93
src/App.js
93
src/App.js
|
@ -1,3 +1,4 @@
|
|||
import palette from 'nice-color-palettes';
|
||||
import chroma from 'chroma-js';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
@ -185,42 +186,74 @@ Color.defaultProps = {
|
|||
}
|
||||
|
||||
S.Color = styled(Color)`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
class Palette extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
palette: palette[0],
|
||||
}
|
||||
|
||||
this.randomizePalette = this.randomizePalette.bind(this);
|
||||
}
|
||||
|
||||
randomizePalette() {
|
||||
const newPalette = palette[Math.floor(Math.random() * palette.length)];
|
||||
this.setState({palette: newPalette});
|
||||
}
|
||||
|
||||
render() {
|
||||
const colors = this.state.palette.map(color =>
|
||||
<li key={color}>
|
||||
<S.Color
|
||||
className="color-list"
|
||||
baseColor={color}
|
||||
/>
|
||||
</li>
|
||||
);
|
||||
return (
|
||||
<article>
|
||||
<button onClick={this.randomizePalette}>Random Palette</button>
|
||||
<ul className={this.props.className}>
|
||||
{colors}
|
||||
</ul>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
S.Palette = styled(Palette)`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<S.Color
|
||||
className="color-list"
|
||||
baseColor="#dbdfac"
|
||||
/>
|
||||
<S.Color
|
||||
className="color-list"
|
||||
baseColor="#fb3640"
|
||||
/>
|
||||
<S.Palette />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
Reference in New Issue