hellowin/kanca

import React from 'react';
import MediaQuery from 'react-responsive';
import userRepo from 'infra/repo/user';
import styles from './Login.style';
import kancaLogo from 'img/logo.png';

const Login = () => {
  return (
    <div style={styles.container}>
        <MediaQuery minDeviceWidth={320} maxWidthDevice={736} minWidth={320} maxWidth={736}>
          {(matches) => {
            return (
              <div>
                <a href="https://github.com/hellowin/kanca">
                  <img
                    style={{ position: 'absolute', top: 0, right: 0, border: 0 }}
                    src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
                    alt="Fork me on GitHub"
                    data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"
                  />
                </a>
                <div style={styles.content}>
                  <img src={kancaLogo} alt="logo"/>
                  <span style={styles.description}>An app to analyze Facebook Group activity</span>
                  <button type="button" className="btn btn-facebook" onClick={() => userRepo.login()} style={{ cursor: 'pointer' }}>
                    <span>Login by Facebook</span>
                  </button>
                </div>
              </div>
            )
          }}
        </MediaQuery>
    </div>
  );
}

export default Login;