{"size": 1543, "ext": "js", "max_stars_repo_path": "layouts/_components.js", "max_stars_repo_name": "connor-baer/connorbaer.co", "max_stars_repo_stars_event_min_datetime": "2019-01-25T13:16:11.000Z", "max_stars_repo_stars_event_max_datetime": "2021-03-21T16:18:14.000Z", "max_issues_repo_path": "layouts/_components.js", "max_issues_repo_name": "connor-baer/connorbaer.co", "max_issues_repo_issues_event_min_datetime": "2017-05-21T10:05:57.000Z", "max_issues_repo_issues_event_max_datetime": "2021-09-20T22:42:31.000Z", "max_forks_repo_path": "layouts/_components.js", "max_forks_repo_name": "connor-baer/connorbaer.co", "max_forks_repo_forks_event_min_datetime": "2017-02-22T10:28:31.000Z", "max_forks_repo_forks_event_max_datetime": "2020-07-18T14:34:45.000Z"}
{"max_stars_count": 5, "max_issues_count": 30, "max_forks_count": 6, "avg_line_length": 28.0545454545, "max_line_length": 80, "alphanum_fraction": 0.6429034349}
import React from 'react';
import styled from '@emotion/styled';
import { css } from '@emotion/core';
import { Anchor, Paragraph, Heading, Image, Hr } from '@madebyconnor/bamboo-ui';

import Blockquote from '../components/blog/Blockquote';

const listStyles = ({ theme }) => css`
  margin-bottom: ${theme.spacing.m};
  padding-left: ${theme.spacing.l};
`;

const List = styled(Paragraph)(listStyles);

const listItemStyles = (theme) => css`
  margin-bottom: ${theme.spacing.s};
  margin-left: ${theme.spacing.s};
`;

export { Paragraph };
export const HeadingOne = (props) => <Heading as="h2" size="xl" {...props} />;
export const HeadingTwo = (props) => <Heading as="h3" size="l" {...props} />;
export const HeadingThree = (props) => <Heading as="h4" size="m" {...props} />;
export const Strong = (props) => (
  <Paragraph as="strong" weight="bold" {...props} />
);
export const Emphasis = (props) => (
  <Paragraph as="em" slope="italic" {...props} />
);
export const Quote = (props) => <Emphasis as="q" {...props} />;
export const OrderedList = (props) => <List as="ol" {...props} />;
export const UnorderedList = (props) => <List as="ul" {...props} />;
export const ListItem = (props) => (
  <Paragraph as="li" css={listItemStyles} {...props} />
);

const components = {
  h1: HeadingOne,
  h2: HeadingTwo,
  h3: HeadingThree,
  p: Paragraph,
  ol: OrderedList,
  ul: UnorderedList,
  li: ListItem,
  a: Anchor,
  em: Emphasis,
  strong: Strong,
  q: Quote,
  blockquote: Blockquote,
  img: Image,
  hr: Hr,
};

export default components;
