Heading2.js

import React from 'react';
import styled, { css } from 'styled-components';
import { baseTheme, getFont } from '@crowdlab/themes';
import { getFontSize } from './helpers';

const HeadingBase = styled.h1`
  font-family: ${getFont('bold')};
  font-weight: 500;
  font-size: ${getFontSize};
  margin: 0;
  margin-top: 1rem;
  margin-bottom: 1rem;
`;

const Heading = ({ level, ...props }) => {
  const Component = HeadingBase.withComponent(`h${level}`);

  return <Component {...props} />;
};

Heading.defaultProps = {
  level: 1,
  theme: baseTheme,
};

export default Heading;