-
+ {colors}
+
diff --git a/src/App.js b/src/App.js index 0a93254..5727ce0 100644 --- a/src/App.js +++ b/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 => +