import PropTypes from 'prop-types'

import Pattern from './Pattern'

const Slot = ({ pattern, members }) => {
  const item = (id) => {
    const m = members[id]
    return (
      <Pattern member={m} key={id} />
    )
  }

  return (
    <div className='frame'>
      <style jsx>{`
        .frame {
          position: relative;
          width: 100px;
          height: 100px;
          overflow: hidden;
        }

        ul {
          position: absolute;
          top: 0;
          left: 0;
          margin: 0;
          padding: 0;
          list-style: none;
        }
      `}</style>
      <ul>
        {pattern.map(item)}
      </ul>
    </div>
  )
}

Slot.propTypes = {
  pattern: PropTypes.array.isRequired,
  members: PropTypes.object.isRequired
}

export default Slot

@@ -62,16 +62,201 @@
 ttern'%0A%0A
+// For loop, copy first member to last.%0Aconst createLoopPattern = (pattern) =%3E %7B%0A  if (pattern.length === 0) return pattern%0A%0A  const first = pattern%5B0%5D%0A%0A  return %5B...pattern, first%5D%0A%7D%0A%0A
 const Sl
@@ -306,16 +306,19 @@
 em = (id
+, i
 ) =%3E %7B%0A 
@@ -387,17 +387,16 @@
 %7D key=%7Bi
-d
 %7D /%3E%0A   
@@ -403,16 +403,66 @@
  )%0A  %7D%0A%0A
+  const loopPattern = createLoopPattern(pattern)%0A%0A
   return
@@ -845,17 +845,21 @@
        %7B
-p
+loopP
 attern.m

Add pattern for loop