const H1 = (props: any) => (
  <h1
    className="pb-2 mt-6 mb-4 text-4xl font-semibold leading-tight border-b"
    {...props}
  />
)
const H2 = (props: any) => (
  <h2
    className="pb-2 mt-6 mb-4 text-2xl font-semibold leading-tight border-b"
    {...props}
  />
)
const H3 = (props: any) => (
  <h3 className="mt-6 mb-4 text-lg font-semibold leading-snug" {...props} />
)
const H4 = (props: any) => (
  <h4 className="mt-6 mb-4 text-base font-semibold leading-none" {...props} />
)
const H5 = (props: any) => (
  <h5 className="mt-6 mb-4 text-sm font-semibold leading-tight" {...props} />
)
const H6 = (props: any) => (
  <h6
    className="mt-6 mb-4 text-sm font-semibold leading-tight text-gray-600"
    {...props}
  />
)
const UL = (props: any) => (
  <ul className="pl-8 text-base list-disc" {...props} />
)
const OL = (props: any) => (
  <ol className="pl-8 text-base list-decimal" {...props} />
)

const MdComponents = {
  h1: H1,
  h2: H2,
  h3: H3,
  h4: H4,
  h5: H5,
  h6: H6,
  ul: UL,
  ol: OL,
}

export default MdComponents