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;
