58 lines
2.4 KiB
JavaScript
58 lines
2.4 KiB
JavaScript
import React, { Component } from 'react';
|
|
|
|
import Hardware from './Hardware';
|
|
import Requirement from './Requirement';
|
|
import BlocklyWindow from '../Blockly/BlocklyWindow';
|
|
|
|
import Grid from '@material-ui/core/Grid';
|
|
import Typography from '@material-ui/core/Typography';
|
|
import ReactMarkdown from 'react-markdown'
|
|
|
|
|
|
class Instruction extends Component {
|
|
|
|
render() {
|
|
var step = this.props.step;
|
|
var isHardware = step.hardware && step.hardware.length > 0;
|
|
var areRequirements = step.requirements && step.requirements.length > 0;
|
|
return (
|
|
<div>
|
|
<Typography variant='h4' style={{ marginBottom: '5px' }}>{step.headline}</Typography>
|
|
<Typography style={isHardware ? {} : { marginBottom: '5px' }}><ReactMarkdown className={'tutorial'} linkTarget={'_blank'} skipHtml={false}>{step.text}</ReactMarkdown></Typography>
|
|
{isHardware ?
|
|
<Hardware picture={step.hardware} /> : null}
|
|
{areRequirements > 0 ?
|
|
<Requirement requirements={step.requirements} /> : null}
|
|
{step.media ?
|
|
step.media.picture ?
|
|
<div style={{ display: 'flex', justifyContent: 'center', marginBottom: '5px' }}>
|
|
<img src={`${process.env.REACT_APP_BLOCKLY_API}/media/${step.media.picture.path}`} alt='' style={{ maxHeight: '40vH', maxWidth: '100%' }} />
|
|
</div>
|
|
: step.media.youtube ?
|
|
/*16:9; width: 800px; height: width/16*9=450px*/
|
|
<div style={{ maxWidth: '800px', margin: 'auto' }}>
|
|
<div style={{ position: 'relative', height: 0, paddingBottom: 'calc(100% / 16 * 9)' }}>
|
|
<iframe title={step.media.youtube} style={{ position: 'absolute', top: '0', left: '0', width: '100%', maxWidth: '800px', height: '100%', maxHeight: '450px' }} src={`https://www.youtube.com/embed/${step.media.youtube}`} frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
|
|
</div>
|
|
</div>
|
|
: null
|
|
: null}
|
|
{step.xml ?
|
|
<Grid container spacing={2} style={{ marginBottom: '5px' }}>
|
|
<Grid item xs={12} style={{display: 'flex', justifyContent: 'center'}}>
|
|
<BlocklyWindow
|
|
svg
|
|
blockDisabled
|
|
initialXml={step.xml}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
: null}
|
|
</div>
|
|
);
|
|
};
|
|
}
|
|
|
|
|
|
export default Instruction;
|