136 lines
3.3 KiB
TypeScript
136 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { createElements } from "@/lib/tcmd";
|
|
import Link from "next/link";
|
|
import React, { FC, ReactNode, use, useMemo } from "react";
|
|
|
|
export const TCMD: FC<{ body: Promise<string> }> = ({ body }) => {
|
|
const text = use(body);
|
|
const elements = useMemo(() => createElements(text), [text]);
|
|
return (
|
|
// <div className="grid grid-cols-2">
|
|
// <pre>{JSON.stringify(elements,null,2)}</pre>
|
|
// </div>
|
|
<div>
|
|
{elements.map(renderBlock)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const renderBlock = (block: BlockChildren): ReactNode => {
|
|
switch (block.type) {
|
|
case "block":
|
|
return block.children.map(renderBlock);
|
|
case "grid":
|
|
return (
|
|
<div
|
|
style={{
|
|
"--grid-cols": block.metadata.columns,
|
|
} as React.CSSProperties}
|
|
className="grid grid-cols-dynamic gap-x-8 gap-y-6"
|
|
>
|
|
{block.children.map((c, i) => (
|
|
<div key={"block-grid" + c.type + i}>{renderBlock(c)}</div>
|
|
))}
|
|
</div>
|
|
);
|
|
case "card":
|
|
return <div className="card">{block.children.map(renderBlock)}</div>;
|
|
default:
|
|
return (
|
|
renderParagraph(block as ParagraphToken)
|
|
);
|
|
}
|
|
};
|
|
|
|
const renderParagraph = (p: ParagraphToken) => {
|
|
switch (p.type) {
|
|
case "p":
|
|
return <p>{p.content.map(renderToken)}</p>;
|
|
case "code":
|
|
return (
|
|
<pre className="whitespace-pre-wrap">
|
|
{p.content.map((c) => c.line.toString()).join("\n\n")}
|
|
</pre>
|
|
);
|
|
default:
|
|
return (
|
|
<p className="bg-red-600 text-white">
|
|
Block or paragraph missing implementation: {p.type}
|
|
</p>
|
|
);
|
|
}
|
|
};
|
|
|
|
const renderToken = (t: Token) => {
|
|
switch (t.type) {
|
|
case "h1":
|
|
return (
|
|
<p className="font-bold text-2xl">
|
|
{renderInlineToken(t.line)}
|
|
</p>
|
|
);
|
|
case "h2":
|
|
return (
|
|
<p className="font-bold text-xl">
|
|
{renderInlineToken(t.line)}
|
|
</p>
|
|
);
|
|
case "h3":
|
|
return (
|
|
<p className="font-bold text-lg">
|
|
{renderInlineToken(t.line)}
|
|
</p>
|
|
);
|
|
case "p":
|
|
return (
|
|
<p>
|
|
{t.lines.map(renderToken)}
|
|
</p>
|
|
);
|
|
case "text":
|
|
return (
|
|
<>
|
|
{renderInlineToken(t.line)}
|
|
|
|
</>
|
|
);
|
|
case "list1":
|
|
return <li className="list-disc ml-6">{renderInlineToken(t.line)}</li>;
|
|
case "list2":
|
|
return <li className="list-disc ml-8">{renderInlineToken(t.line)}</li>;
|
|
default:
|
|
return (
|
|
<p className="text-white bg-red-500">
|
|
Missing implementation for tcMD element `{(t as { type: string })
|
|
.type}`
|
|
</p>
|
|
);
|
|
}
|
|
};
|
|
|
|
const renderInlineToken = (l: Line) => {
|
|
if (typeof l === "string") return l;
|
|
|
|
return l.map((token) => {
|
|
switch (token.type) {
|
|
case "text":
|
|
return <span>{token.content}</span>;
|
|
case "bold":
|
|
return <span className="font-bold">{token.content}</span>;
|
|
case "anchor":
|
|
return (
|
|
<Link className="text-primary-600" href={token.data.href}>
|
|
{token.content}
|
|
</Link>
|
|
);
|
|
default:
|
|
return (
|
|
<span className="bg-red-500">
|
|
Inline element not implemented: {token.type}
|
|
</span>
|
|
);
|
|
}
|
|
});
|
|
};
|