hardware of steps

src/components/Tutorial/Builder/Hardware.js

@@ -0,0 +1,82 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { changeContent } from '../../../actions/tutorialBuilderActions';
+
+import hardware from '../../../data/hardware.json';
+
+import { fade } from '@material-ui/core/styles/colorManipulator';
+import { withStyles } from '@material-ui/core/styles';
+import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
+import GridList from '@material-ui/core/GridList';
+import GridListTile from '@material-ui/core/GridListTile';
+import GridListTileBar from '@material-ui/core/GridListTileBar';
+
+const styles = theme => ({
+  multiGridListTile: {
+    background: fade(theme.palette.secondary.main, 0.5),
+    height: '30px'
+  },
+  multiGridListTileTitle: {
+    color: theme.palette.text.primary
+  },
+  border: {
+    '&:hover': {
+      width: 'calc(100% - 4px)',
+      height: 'calc(100% - 4px)',
+      border: `2px solid ${theme.palette.primary.main}`
+    }
+  },
+  active: {
+    width: 'calc(100% - 4px)',
+    height: 'calc(100% - 4px)',
+    border: `2px solid ${theme.palette.primary.main}`
+  }
+});
+
+class Requirements extends Component {
+
+  onChange = (hardware) => {
+    var hardwareArray = this.props.value;
+    if(hardwareArray.filter(value => value === hardware).length > 0){
+      hardwareArray = hardwareArray.filter(value => value !== hardware);
+    }
+    else {
+      hardwareArray.push(hardware);
+    }
+    this.props.changeContent(this.props.index, 'hardware', hardwareArray);
+  }
+
+  render() {
+    var cols = isWidthDown('md', this.props.width) ? isWidthDown('sm', this.props.width) ? isWidthDown('xs', this.props.width) ? 2 : 3 : 4 : 6;
+    return (
+        <GridList cellHeight={100} cols={cols} spacing={10}>
+        {hardware.map((picture,i) => (
+          <GridListTile key={i} onClick={() => this.onChange(picture.id)} classes={{tile: this.props.value.filter(value => value === picture.id).length > 0 ? this.props.classes.active : this.props.classes.border}}>
+            <div style={{margin: 'auto', width: 'max-content'}}>
+              <img src={`/media/hardware/${picture.src}`} alt={picture.name} height={100} style={{cursor: 'pointer'}} />
+            </div>
+            <GridListTileBar
+              classes={{root: this.props.classes.multiGridListTile}}
+              title={
+                <div style={{overflow: 'hidden', textOverflow: 'ellipsis'}} className={this.props.classes.multiGridListTileTitle}>
+                  {picture.id}
+                </div>
+              }
+            />
+          </GridListTile>
+        ))}
+        </GridList>
+    );
+  };
+}
+
+Requirements.propTypes = {
+  changeContent: PropTypes.func.isRequired
+};
+
+const mapStateToProps = state => ({
+  change: state.builder.change
+});
+
+export default connect(mapStateToProps, { changeContent })(withStyles(styles, { withTheme: true })(withWidth()(Requirements)));