import React from 'react'
import Pattern from './Pattern'
import { firstKey } from '../utils/helpers'

const Patterns = props => {
  const { specs, notes, components } = props

  return (
    <div>
      <header>
        <h1>Components</h1>
      </header>

      {specs.map((spec, i) => {
        const key = firstKey(spec)
        const Component = components[key]
        const { propTypes, presets } = spec[key]

        return (
          <div key={i}>
            <Pattern
              key={i}
              patternName={key}
              propTypes={propTypes}
              notes={notes[i]}
              presets={presets}
              Component={Component}>
            </Pattern>
          </div>
        )
      })}
    </div>
  )
}

export default Patterns

@@ -301,86 +301,20 @@
 nst 
-key = firstKey(spec)%0A        const Component = components%5Bkey%5D%0A        const %7B
+%7B component,
  pro
@@ -341,13 +341,8 @@
 spec
-%5Bkey%5D
 %0A%0A  
@@ -450,19 +450,25 @@
 rnName=%7B
-key
+component
 %7D%0A      
@@ -585,25 +585,25 @@
 ponent=%7B
-C
+c
 omponent
 %7D%3E%0A     
@@ -594,16 +594,28 @@
 omponent
+s%5Bcomponent%5D
 %7D%3E%0A     

tidy up the code based on the latest changes to the story data