XeNote/components/MDContent.tsx

82 lines
1.7 KiB
TypeScript
Raw Normal View History

import React from 'react';
import { useRouter } from 'next/router'
2023-12-31 21:17:04 +00:00
export interface LinkType {
2023-12-31 20:29:30 +00:00
slug: string
title: string
shortSummary: string
}
interface BackLinksProps {
2023-12-31 20:29:30 +00:00
linkList: LinkType[]
}
2023-12-31 20:29:30 +00:00
function BackLinks({ linkList }: BackLinksProps) {
return (<div className="">
<h3 className="">Link to this note</h3>
{(linkList != null && linkList.length > 0)
?
<>
<div className="">
{linkList.map(aLink =>
<div key={aLink.slug} className="">
{/*<Link href={aLink.slug}>*/}
<a href={aLink.slug}>
<p className="">{aLink.title}</p>
<p className="">{aLink.shortSummary} </p>
</a>
{/*</Link>*/}
</div>
)}
</div>
</>
: <> <p className=""> No backlinks found</p> </>}
</div>);
}
interface MDContentProps {
2023-12-30 16:42:21 +00:00
content: string
2023-12-31 20:29:30 +00:00
backLinks: LinkType[]
}
2023-12-30 16:42:21 +00:00
function MDContent({ content, backLinks }: MDContentProps) {
useRouter();
return (
<div className="flex-1 p-xl">
<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>
);
}
2023-12-31 20:29:30 +00:00
interface BackLinksGroupProps {
links: LinkType[]
}
function BackLinksGroup({ links }: BackLinksGroupProps) {
if (!links?.length) {
return (
<p className=""> No backlinks found</p>
)
}
return (
<details>
<summary>
BackLinks
</summary>
<BackLinks linkList={links} />
</details>
)
}
export default MDContent;