XeNote/components/MDContent.tsx

import React from 'react';
import { useRouter } from 'next/router'

interface LinkType {
  slug: string
  title: string
  shortSummary: string
}

interface BackLinksProps {
  linkList: LinkType[]
}

function BackLinks({ linkList }: BackLinksProps) {
  return (<div className="note-footer">
    <h3 className="backlink-heading">Link to this note</h3>
    {(linkList != null && linkList.length > 0)
      ?
      <>
        <div className="backlink-container">
          {linkList.map(aLink =>
            <div key={aLink.slug} className="backlink">
              {/*<Link href={aLink.slug}>*/}
              <a href={aLink.slug}>
                <p className="backlink-title">{aLink.title}</p>
                <p className="backlink-preview">{aLink.shortSummary} </p>
              </a>
              {/*</Link>*/}
            </div>
          )}
        </div>
      </>
      : <> <p className="no-backlinks"> No backlinks found</p> </>}
  </div>);
}


interface MDContentProps {
  content: string
  backLinks: LinkType[]
}

function MDContent({ content, backLinks }: MDContentProps) {
  useRouter();

  return (

    <div className="markdown-rendered">
      <div dangerouslySetInnerHTML={{ __html: content }} />
      <BackLinksGroup links={backLinks} />
      <hr />
      <footer>
        <p>Powered by  <a href="https://gitlab.com/Tarmstrong95">Triston</a>, © {new Date().getFullYear()}</p>
      </footer>
    </div>
  );
}

interface BackLinksGroupProps {
  links: LinkType[]
}

function BackLinksGroup({ links }: BackLinksGroupProps) {

  if (!links?.length) {
    return (
      <p className="no-backlinks"> No backlinks found</p>
    )
  }

  return (
    <details>
      <summary>
        BackLinks
      </summary>
      <BackLinks linkList={links} />
    </details>
  )
}

export default MDContent;