Import/export skeleton

src/containers/SkynetImport/SkynetImport.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import {Component} from 'react';
+import {connect} from 'react-redux';
+import './SkynetImport.css'
+import Box from '../../components/UI/Box/Box';
+import Button from '../../components/UI/Button/Button';
+import {displaySkynetImport} from '../../redux/actions/skynet_actions';
+
+const mapDispatchToProps = dispatch => {
+  return {
+    displaySkynetImport: display => dispatch(displaySkynetImport(display)),
+  }
+};
+
+export default connect(null, mapDispatchToProps)(class extends Component {
+
+  state = {
+    import_list: '',
+  };
+
+  render() {
+    return (
+      <Box dxDark dxStyle={{height: 'auto', padding: 'var(--default_spacing)', width: 'calc(100vw - (var(--default_spacing) * 4)'}}>
+        <div style={{float: 'right', margin: 0, padding: 0, marginTop: '-4px', boxSizing: 'border-box', display: 'block'}}>
+          <a href={'#'}
+             onClick={()=>this.props.displaySkynetImport(false)}
+             style={{cursor: 'pointer'}}>X</a>
+        </div>
+        <h1 className={'SkynetImportHeading'}>Import List</h1>
+        <textarea autoFocus={true}
+                  className={'SkynetImportTextArea'}
+                  onChange={e => this.setState({
+                    ...this.state,
+                    import_list: e.target.value,
+                  })}
+                  value={this.state.import_list}
+                  rows={10} />
+
+        <div className={'SkynetImportButtons'}>
+          <Button buttonStyles={{height: 'auto', marginTop: 'var(--default_spacing)', width: 'auto'}}>Import Syntax...</Button>
+          <Button buttonStyles={{height: 'auto', marginLeft: 'var(--default_spacing)', marginTop: 'var(--default_spacing)', width: 'auto'}}>Next</Button>
+        </div>
+      </Box>
+    );
+  }
+});