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 => +
  • + +
  • + ); + return ( +
    + + +
    + ); + } +} + +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 (
    - - +
    ); }