import React, { createClass } from 'react'
import { hyphenate } from '../utils/helpers'
import notes from '../notes'
import specs from '../specs'
import components from '../components'
import Pattern from '../components/Pattern'

const childRoutes = specs.map(({group, page, component, propTypes, presets}) => {
  const path = hyphenate(page.toLowerCase())

  const note = notes.reduce((acc, note) => {
    acc += note[component.toLowerCase()]
    return acc
  }, '')

  const ChildComponent = () => {
    return <Pattern
      patternName={component}
      propTypes={propTypes}
      notes={note}
      presets={presets}
      Component={components[component]} />
  }

  return {
    path, group, page,
    component: ChildComponent
  }
})

export default childRoutes

@@ -404,20 +404,30 @@
     
-acc += note%5B
+const componentName = 
 comp
@@ -445,17 +445,97 @@
 erCase()
-%5D
+%0A%0A    if (note%5BcomponentName%5D && componentName)%0A      acc += note%5BcomponentName%5D%0A
 %0A    ret

fix an issue causing undefined to be output breaking markdown