{"size": 729, "ext": "js", "max_stars_repo_path": "src/components/Content.js", "max_stars_repo_name": "yuschick/react-content-tabs", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Content.js", "max_issues_repo_name": "yuschick/react-content-tabs", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Content.js", "max_forks_repo_name": "yuschick/react-content-tabs", "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": 20.25, "max_line_length": 79, "alphanum_fraction": 0.683127572}
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const propTypes = {
  id: PropTypes.string.isRequired,
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired,
  activeTab: PropTypes.string,
};

const defaultProps = {
  activeTab: '',
};

const Content = ({ id, activeTab, children }) => (
  <ContentArticle
    role="tabpanel"
    id={`${id}-content`}
    aria-labelledby={`tab-${id}`}
    aria-hidden={activeTab !== id}
  >
    {children}
  </ContentArticle>
);

const ContentArticle = styled.article`
  &[aria-hidden='true'] {
    display: none;
  }
`;

Content.propTypes = propTypes;
Content.defaultProps = defaultProps;

export default Content;
