{"size": 1852, "ext": "js", "max_stars_repo_path": "src/common/Layout/index.js", "max_stars_repo_name": "game-of-object-Object/FE-Client", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/common/Layout/index.js", "max_issues_repo_name": "game-of-object-Object/FE-Client", "max_issues_repo_issues_event_min_datetime": "2021-03-10T16:20:01.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-19T01:22:37.000Z", "max_forks_repo_path": "src/common/Layout/index.js", "max_forks_repo_name": "game-of-object-Object/FE-Client", "max_forks_repo_forks_event_min_datetime": "2020-12-21T03:33:50.000Z", "max_forks_repo_forks_event_max_datetime": "2020-12-21T03:33:50.000Z"}
{"max_stars_count": null, "max_issues_count": 2, "max_forks_count": 1, "avg_line_length": 27.6417910448, "max_line_length": 70, "alphanum_fraction": 0.4233261339}
/* eslint-disable react/prop-types */
import React from 'react';
import { Flex, Link, Box, Text } from '@chakra-ui/core';
import { NavLink } from 'react-router-dom';
import { useHistory } from 'react-router';

export default function Layout({ children }) {
  const history = useHistory();
  return (
    <Flex
      minH="100vh"
      maxW="100vw"
      direction="column"
      align="center"
      backgroundColor="gray.600"
    >
      <Box w="100%">
        <Flex
          h="8vh"
          bg="gray.900"
          align="center"
          justify="space-between"
          p="0 2rem"
        >
          <Link as={NavLink} to="/">
            <Text fontSize="2xl" color="gray.50" fontFamily="mono">
              Game of [object Object]
            </Text>
          </Link>
          {localStorage.getItem('token') ? (
            <Flex>
              <Link as={NavLink} to="/game">
                <Text color="gray.50" fontSize="lg">
                  Play Now!
                </Text>
              </Link>
              <Text
                color="gray.50"
                fontSize="lg"
                onClick={() => {
                  localStorage.removeItem('token');
                  history.push('/');
                }}
                style={{ cursor: 'pointer' }}
                m="0 2rem"
              >
                Logout
              </Text>
            </Flex>
          ) : (
            <Flex>
              <Link fontSize="lg" as={NavLink} to="/login" m="0 2rem">
                <Text color="gray.50">Login</Text>
              </Link>
              <Link fontSize="lg" as={NavLink} to="/register">
                <Text color="gray.50">Register</Text>
              </Link>
            </Flex>
          )}
        </Flex>
      </Box>
      {/* <Box h="5rem" /> */}
      <Box>{children}</Box>
    </Flex>
  );
}
