Color Theme Generator (Bike)

App.js

import React, { useState } from "react"
import "./App.css"

const Color = props => {
  return (
    <div style={{ backgroundColor: props.color.value }}>
      <h1>{props.color.value}</h1>
      <h3>Locked: {props.color.locked.toString()}</h3>
      <input
        name="isLocked"
        type="checkbox"
        checked={props.color.locked}
        onChange={props.toggleLock}
      />
    </div>
  )
}

const ColorTheme = props => {
  return (
    <div>
      <h3>Color Theme</h3>
      {props.colors.map(color => (
        <div style={{ backgroundColor: color }}>{color}</div>
      ))}
    </div>
  )
}

const App = () => {
  const uniqueId = () => { return Math.random().toString(10).substring(5) }
  
  const randomColor = () => `#${(Math.random().toString(16) + "000000").substring(2, 8)}`
  
  const color = () => { return { id: uniqueId(), value: randomColor(), locked: false } }
  
  const [colors, setColors] = useState([color(), color(), color()])
  
  const [colorThemes, setColorThemes] = useState([])

  const changeColors = () => {
    colors.forEach(c => {
      if (!c.locked) { c.value = randomColor() }
    })
    setColors([...colors])
  }

  const saveColorTheme = () => {
    const colorTheme = colors.map(c => c.value)
    colorThemes.unshift(colorTheme)
    setColorThemes([...colorThemes])
  }

  const clearColorThemes = () => {
    setColorThemes([])
  }

  const toggleLock = id => {
    const matchedColor = colors.find(c => c.id === id)
    matchedColor.locked = !matchedColor.locked
    setColors([...colors])
  }

  return (
    <div className="App">
      <button onClick={changeColors}>Change Colors</button>
      <button onClick={saveColorTheme}>Save Colors</button>
      <button onClick={clearColorThemes}>Clear Colors</button>
      {colors.map(color => (
        <Color key={color.id} color={color} toggleLock={() => toggleLock(color.id)} />
      ))}
      {colorThemes.map(colorTheme => (
        <ColorTheme colors={colorTheme} />
      ))}
    </div>
  )
}

export default App