import { Component } from 'react'
import Shortcut from './Shortcut'

export default class Shortcuts extends Component {
  constructor (props) {
    super(props)
    this.state = {
      shortcuts: []
    }
  }

  render () {
    return (
      <div className='shortcut-wrapper'>
        {this.props.shortcuts && this.props.shortcuts.map((item, index) => <Shortcut data={item} key={index} />)}
        <style jsx>
          {`
            .shortcut-wrapper {
              display: grid;
              display: -ms-grid;
              grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
              -ms-grid-columns: repeat(auto-fit, minmax(250px, 1fr));
              grid-column-gap: 14px;
              grid-row-gap: 14px;
            }
          `}
        </style>
      </div>
    )
  }
}

@@ -1,38 +1,4 @@
-import %7B Component %7D from 'react'%0A
 impo
@@ -47,166 +47,29 @@
 ult 
-class Shortcuts extends Component %7B%0A  constructor (props) %7B%0A    super(props)%0A    this.state = %7B%0A      shortcuts: %5B%5D%0A    %7D%0A  %7D%0A%0A  render () %7B%0A    return (%0A    
+(%7B shortcuts %7D) =%3E (%0A
   %3Cd
@@ -109,24 +109,9 @@
     
-    %7Bthis.props.
+%7B
 shor
@@ -123,19 +123,8 @@
  && 
-this.props.
 shor
@@ -189,20 +189,16 @@
 x%7D /%3E)%7D%0A
-    
     %3Csty
@@ -215,19 +215,11 @@
     
-   
- 
 %7B%60%0A
-    
     
@@ -244,36 +244,32 @@
 per %7B%0A          
-  
-  
 display: grid;%0A 
@@ -263,28 +263,24 @@
 play: grid;%0A
-    
           di
@@ -302,28 +302,24 @@
 ;%0A          
-  
-  
 grid-templat
@@ -377,20 +377,16 @@
         
-    
 -ms-grid
@@ -439,28 +439,24 @@
 ;%0A          
-  
-  
 grid-column-
@@ -472,28 +472,24 @@
 ;%0A          
-    
 grid-row-gap
@@ -508,35 +508,23 @@
     
-  
-  %7D%0A  
+%7D%0A
       
-  
 %60%7D%0A    
-  
-  
 %3C/st
@@ -528,20 +528,16 @@
 /style%3E%0A
-    
   %3C/div%3E
@@ -541,16 +541,6 @@
 iv%3E%0A
-    )%0A  %7D%0A%7D
+)
 %0A

Rewrite shortcuts