{"size": 628, "ext": "js", "max_stars_repo_path": "src/examples/ReactProjects/ch6/client/components/Button/Button.js", "max_stars_repo_name": "luannguyen252/my-react-journey", "max_stars_repo_stars_event_min_datetime": "2021-07-26T18:19:47.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-09T10:04:50.000Z", "max_issues_repo_path": "src/examples/ReactProjects/ch6/client/components/Button/Button.js", "max_issues_repo_name": "luannguyen252/my-react-journey", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/examples/ReactProjects/ch6/client/components/Button/Button.js", "max_forks_repo_name": "luannguyen252/my-react-journey", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 23.2592592593, "max_line_length": 64, "alphanum_fraction": 0.6592356688}
import React from "react";
import styled from "styled-components";

const ButtonWrapper = styled.button`
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  color: ${({ color }) => (color ? color : "white")};
  padding: 10px;
  line-height: 2;
  border-radius: 5px;
  font-weight: bold;
  border: 4px solid ${({ color }) => (color ? color : "white")};
  font-size: inherit;
  cursor: pointer;
  text-decoration: none;
`;

const Button = ({ children, color, onClick }) => (
  <ButtonWrapper color={color} onClick={onClick}>
    {children}
  </ButtonWrapper>
);

export default Button;
