use nice-color-palettes to generate palettes

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';
@@ -210,17 +211,49 @@ li {
 	}
 `;
 
+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;
+`;
+
 function App() {
 	return (
 		<div className="App">
-			<S.Color
+			<S.Palette />
-				className="color-list"
-				baseColor="#dbdfac"
-			/>
-			<S.Color
-				className="color-list"
-				baseColor="#fb3640"
-			/>
 		</div>
 	);
 }