<|start_filename|>app/components/home-1/Home.js<|end_filename|>
// @flow
import React, {Component} from 'react';
import styles from './Home.scss';
import iconExternal from "../../../resources/external-link.svg"
import Header from '../header/Header';

// type Props = {};

export default class Home extends Component < Props > {
  constructor(props) {
    super(props);
    this.state = {
      git: []
    };
  }
  componentDidMount() {
    const url = "https://raw.githubusercontent.com/mariorodeghiero/git-commands/master/app/db.j" +
        "son"
    fetch(url)
      .then(res => res.json())
      .then(data => {
        const git = data
          .git
          .map((git, index) => (
            <section key={index} className={styles.box} data-tid="box">
              <h3>{git.title}</h3>
              <a href={git.url} target="_blank">
                <img
                  className={styles.externalLink}
                  src={iconExternal}
                  data-tid="externalLink"
                  alt="Git icon"
                />
              </a>
              <hr />
              <nav>
                <ul>
                  {git
                    .command
                    .map((command, index) => (
                      <li key={index} title={command.note}>{command.command}</li>
                    ))}
                </ul>
              </nav>
            </section>
          ))
        return this.setState({git})
      })
      .catch(err => console.error(err))
  }
  render() {
    return (
      <div>
        <div className={styles.container} data-tid="container">
          <Header />
          <article className={styles.containerBox} data-tid="containerBox">
            {this.state.git}
          </article>
        </div>
      </div>
    );
  }
}


<|start_filename|>app/package.json<|end_filename|>
{
  "name": "electron-react-boilerplate",
  "productName": "Git Commands",
  "version": "1.0.0",
  "description": "App built with Electron and ReactJS",
  "main": "./main.prod.js",
  "author": {
    "name": "<NAME>",
    "email": "<EMAIL>",
    "url": "https://github.com/mariorodeghiero"
  },
  "scripts": {
    "electron-rebuild":
      "node -r babel-register ../internals/scripts/ElectronRebuild.js",
    "postinstall": "npm run electron-rebuild"
  },
  "license": "MIT",
  "dependencies": {}
}


<|start_filename|>docs/style.css<|end_filename|>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,300,100");
html,
body {
    color: #aeb1b0;
    height: 100vh;
    background-color: #002b36;
    background-image: linear-gradient( 90deg, rgba(4, 131, 163, 0.5) 10%, rgba(0, 43, 54, 0.7));
}

h1,
h2,
h3,
h4,
a,
p,
li,
span,
button {
    font-family: "Roboto";
    font-weight: 100;
    line-height: 1.1;
    letter-spacing: 0.025em;
}

li {
    list-style: none;
}

.btn-dark {
    background-color: #000000;
    color: #ffffff;
}


<|start_filename|>app/components/Header/Header.js<|end_filename|>
import React, {Component} from 'react'
import icon from "../../../resources/icon.svg"
import styles from'./Header.scss'


class Header extends Component {
  state = {  }
  render() {
    return (
      <div className={styles.headerContainer} src={icon} data-tid="headerContainer" >
        <header >
          <p>⚖️ MIT License</p>
          <img className={styles.logo} src={icon} data-tid="logo" alt="Git logo" />
          <h2>Commands</h2>
        </header>
      </div>
    );
  }
}

export default Header;
