content: import React from 'react';
  import styled from '@emotion/styled';
  
  import theme from '../theme';
  
  const StyledMarkdown = styled.div`
    > :first-of-type {
      margin-top: 0;
    }
    > :last-child {
      margin-bottom: 0;
    }
  
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      line-height: ${theme.lineHeight[1]};
      margin-top: 2em;
      margin-bottom: 0.25em;
    }
  
    h1 {
      font-size: ${theme.fontsize[6]};
    }
  
    h2 {
      font-size: ${theme.fontsize[5]};
    }
  
    h3 {
      font-size: ${theme.fontsize[4]};
    }
  
    h4 {
      font-size: ${theme.fontsize[3]};
    }
  
    ol,
    ul {
      margin-left: ${theme.space[3]};
    }
  
    ul {
      list-style: disc;
    }
  
    ol {
      list-style: decimal;
    }
  
    li {
      margin-bottom: 0;
    }
  
    ol,
    ul,
    p {
      font-size: 18px;
      margin-bottom: 1rem;
    }
  
    a {
      font-weight: bold;
  
      &:hover {
        text-decoration: underline;
      }
    }
  
    table {
      border: 0;
      background: #f7f7f7;
      border-radius: 4px;
      margin-top: 40px;
      margin-bottom: 40px;
      width: 100%;
      text-align: left;
      display: block;
      overflow: auto;
    }
  
    tbody tr {
      &:nth-of-type(odd) {
        background: #fdfdfd;
      }
    }
  
    th,
    td {
      padding: 8px;
    }
  
    th {
      font-weight: 700;
      font-size: 18px;
    }
  
    td {
      font-size: 14px;
    }
  
    iframe {
      width: 100%;
    }
  
    pre {
      border-radius: ${theme.radii[2]};
      margin-bottom: ${theme.space[4]};
      margin-top: ${theme.space[4]};
    }
  
    pre > code {
      font-size: ${theme.fontsize[2]};
      line-height: ${theme.lineHeight[0]};
    }
  
    *:not(pre) > code {
      color: inherit;
      background: #e6e6e6;
      border-radius: 2px;
      padding: 2px 6px;
      white-space: nowrap;
      font-size: ${theme.fontsize[2]};
    }
  `;
  
  function Markdown({ body, html }) {
    if (body) {
      return <StyledMarkdown>{body}</StyledMarkdown>;
    }
    return <StyledMarkdown dangerouslySetInnerHTML={{ __html: html }} />;
  }
  
  export default Markdown;
  