{"size": 1328, "ext": "js", "max_stars_repo_path": "src/components/how-to-install.js", "max_stars_repo_name": "ndjndj/pickles-homepage", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/how-to-install.js", "max_issues_repo_name": "ndjndj/pickles-homepage", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/how-to-install.js", "max_forks_repo_name": "ndjndj/pickles-homepage", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 30.1818181818, "max_line_length": 67, "alphanum_fraction": 0.4819277108}
import React from 'react';
import '../styles/how-to-install.css';
import Wrapper from '../components/wrapper';
import BulletWrapper from '../components/bullet-wrapper';
import ImgWrapper from '../components/img-wrapper';
import FlexWrapper from '../components/flex-wrapper';
import LP_2 from '../img/PicklesLP_2.png';

export default function HowToInstall() {
    const bullets = [
        'Click to Pickles icon.',
        'Click to SAVE button.',
        'Please enter Pickles name.',
        'Click to SAVE button.',
        'Pickle will be stored in your browser.'
    ];
    const title = 'How to Pickle';
    const direction = 'right';
    const isNum = true;

    return (
        <Wrapper wrapperId="how-to-install" title="How to install">
            <FlexWrapper
                leftComponent = {
                    <ImgWrapper
                        imgSrc = {LP_2}
                        imgAlt = {''}
                        direction = {'left'}
                    />
                }

                rightComponent = {
                    <BulletWrapper
                        bullets = {bullets}
                        title = {title}
                        direction = {'right'}
                        isNum = {isNum}
                    />
                }
            />
        </Wrapper>
    );
}
