{"size": 548, "ext": "js", "max_stars_repo_path": "demo/atoms/Input/index.js", "max_stars_repo_name": "katiawheeler/Thinking-About-React-Atomically", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "demo/atoms/Input/index.js", "max_issues_repo_name": "katiawheeler/Thinking-About-React-Atomically", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "demo/atoms/Input/index.js", "max_forks_repo_name": "katiawheeler/Thinking-About-React-Atomically", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 22.8333333333, "max_line_length": 57, "alphanum_fraction": 0.6441605839}
import React from 'react';
import styled from 'styled-components';
import { colors } from '../../../config';
import { Label } from '../';

const StyledInput = styled('input')`
  width: 100%;
  height: 40px;
  border: 1px solid ${colors.grey[300]};
  outline: none;
  background: white;
  padding: 0 10px;
  font-size: 18px;
`;

const Input = ({ placeholder, label }) => (
  <React.Fragment>
    {label && <Label position='top'>{label}</Label>}
    <StyledInput type='text' placeholder={placeholder} />
  </React.Fragment>
);

export default Input;
