{"size": 669, "ext": "js", "max_stars_repo_path": "src/app/react/components/markdown/heading.js", "max_stars_repo_name": "LINKIWI/react-elemental-docs", "max_stars_repo_stars_event_min_datetime": "2018-01-11T19:22:32.000Z", "max_stars_repo_stars_event_max_datetime": "2021-11-08T11:35:41.000Z", "max_issues_repo_path": "src/app/react/components/markdown/heading.js", "max_issues_repo_name": "LINKIWI/react-elemental-docs", "max_issues_repo_issues_event_min_datetime": "2018-01-13T04:37:25.000Z", "max_issues_repo_issues_event_max_datetime": "2019-01-28T12:54:07.000Z", "max_forks_repo_path": "src/app/react/components/markdown/heading.js", "max_forks_repo_name": "LINKIWI/react-elemental-docs", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 5, "max_issues_count": 2, "max_forks_count": null, "avg_line_length": 20.90625, "max_line_length": 56, "alphanum_fraction": 0.6756352765}
import React from 'react';
import PropTypes from 'prop-types';
import { sizes, Spacing, Text } from 'react-elemental';

// Map of heading levels to the corresponding font size.
const LEVEL_SIZES = {
  1: sizes.beta,
  2: sizes.gamma,
  3: sizes.delta,
  4: sizes.epsilon,
  5: sizes.iota,
  6: sizes.iota,
};

/**
 * Rendering component for various levels of headings.
 */
const Heading = ({ level, children }) => (
  <Spacing size="small" bottom>
    <Text size={LEVEL_SIZES[level.toString()]}>
      {children}
    </Text>
  </Spacing>
);

Heading.propTypes = {
  level: PropTypes.number.isRequired,
  children: PropTypes.node.isRequired,
};

export default Heading;
