From 953a18958899976761f9d3e2def86429e7543c7f Mon Sep 17 00:00:00 2001
From: ray <gitea@rayelliott.dev>
Date: Mon, 27 Apr 2020 22:50:52 +0100
Subject: [PATCH] use nice-color-palettes to generate palettes

---
 src/App.js | 93 ++++++++++++++++++++++++++++++++++++------------------
 1 file changed, 63 insertions(+), 30 deletions(-)

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