{"size": 1441, "ext": "js", "max_stars_repo_path": "app-web/src/components/Form/form.js", "max_stars_repo_name": "ArctiqTeam/devhub-app-web", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "app-web/src/components/Form/form.js", "max_issues_repo_name": "ArctiqTeam/devhub-app-web", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "app-web/src/components/Form/form.js", "max_forks_repo_name": "ArctiqTeam/devhub-app-web", "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": 21.1911764706, "max_line_length": 73, "alphanum_fraction": 0.6280360861}
import React, { Fragment } from 'react';
import styled from '@emotion/styled';
import { Field } from 'react-final-form';

// Styled components ....

// The CSS needs some refactoring, Look into this later ...

export const StyledErrorMessage = styled.div`
  border: 1px solid transparent;
  border-radius: 4px;
  font-weight: 700;
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f2dede;
  border-color: #ebccd1;
  color: #a12622;
`;

export const StyledLabel = styled.label`
  margin-top: 1rem;
  display: block;
`;

export const TextInput = ({ label, ...props }) => {
  return (
    <Fragment>
      <StyledLabel htmlFor={props.id || props.name}>{label}</StyledLabel>
      <Field component="input" {...props}></Field>
    </Fragment>
  );
};

export const SelectDropdown = ({ label, ...props }) => {
  return (
    <Fragment>
      <StyledLabel>{label}</StyledLabel>
      <Field component="select" {...props}></Field>
    </Fragment>
  );
};

export const StylesWrapper = styled.div`
  input {
    display: block;
    font-size: 18px;
    border: 2px solid #606060;
    margin-top: 5px;
    margin-bottom: 15px;
    border-radius: 4px;
    padding: 5px 5px 5px 7px;
  }
  select {
    display: block;
    color: #007bff;
    width: 400px;
    margin: 0;
    box-sizing: border-box;
    padding: 5px 5px 5px 7px;
    margin-right: 10px;
  }
  button {
    position: relative;
    margin: 10px 2px;
    cursor: pointer;
  }
`;
