{"size": 800, "ext": "js", "max_stars_repo_path": "src/components/reusableStyles/auth/signout/Signout.js", "max_stars_repo_name": "arhoy/gatby-aws-starter", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/reusableStyles/auth/signout/Signout.js", "max_issues_repo_name": "arhoy/gatby-aws-starter", "max_issues_repo_issues_event_min_datetime": "2021-03-10T12:37:02.000Z", "max_issues_repo_issues_event_max_datetime": "2021-10-06T14:29:30.000Z", "max_forks_repo_path": "src/components/reusableStyles/auth/signout/Signout.js", "max_forks_repo_name": "arhoy/gatby-aws-starter", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 4, "max_forks_count": null, "avg_line_length": 25.0, "max_line_length": 61, "alphanum_fraction": 0.635}
import React from 'react';
import styled from '@emotion/styled';
import { Auth } from 'aws-amplify';
import { navigate } from '@reach/router';

const Button = styled.button`
  outline: none;
  border: none;
  padding: 3px 5px;
  cursor: pointer;
  color: ${props => props.theme.colors.black};
  background: ${props => props.theme.colors.white};
  border-radius: 3px;
  font-size: 1.3rem;
  &:hover {
    background: ${props => props.theme.colors.primaryLight};
    color: ${props => props.theme.colors.white};
  }
`;

export const Signout = () => {
  const signoutHandler = async () => {
    navigate('/');
    try {
      await Auth.signOut();
    } catch (error) {
      console.error('Not Able to sign user out', error);
    }
  };
  return <Button onClick={signoutHandler}> Sign Out</Button>;
};
