tcmd: Accordion and popover md elements

components/tcmd/index.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { Accordion, AccordionContent } from "@/lib/accordion";
+import { Poppable } from "@/lib/poppables/components/poppable";
 import { createElements } from "@/lib/tcmd";
 import Link from "next/link";
 import React, { FC, Fragment, ReactNode, use, useMemo } from "react";
@@ -12,7 +14,9 @@ export const TCMD: FC<{ body: Promise<string> }> = ({ body }) => {
     //   <pre>{JSON.stringify(elements,null,2)}</pre>
     // </div>
     <div>
-      {elements.map(renderBlock)}
+      {elements.map((e, i) => (
+        <Fragment key={"tcmd-block" + i}>{renderBlock(e)}</Fragment>
+      ))}
     </div>
   );
 };
@@ -20,7 +24,9 @@ export const TCMD: FC<{ body: Promise<string> }> = ({ body }) => {
 const renderBlock = (block: BlockChildren): ReactNode => {
   switch (block.type) {
     case "block":
-      return block.children.map(renderBlock);
+      return block.children.map((e, i) => (
+        <Fragment key={"tcmd-block" + i}>{renderBlock(e)}</Fragment>
+      ));
     case "grid":
       return (
         <div
@@ -30,14 +36,36 @@ const renderBlock = (block: BlockChildren): ReactNode => {
           className="grid grid-cols-dynamic gap-x-8 gap-y-6 mb-6"
         >
           {block.children.map((c, i) => (
-            <Fragment key={"block-grid" + c.type + i}>
+            <div key={"block-grid" + c.type + i}>
               {renderBlock(c)}
-            </Fragment>
+            </div>
           ))}
         </div>
       );
     case "card":
-      return <div className="card">{block.children.map(renderBlock)}</div>;
+      return (
+        <div className="card">
+          {block.children.map((e, i) => (
+            <Fragment key={"card-block" + i + e.type}>
+              {renderBlock(e)}
+            </Fragment>
+          ))}
+        </div>
+      );
+    case "accordion":
+      return (
+        <Accordion
+          title={block.metadata.title || "Expand"}
+        >
+          <AccordionContent>
+            {block.children.map((e, i) => (
+              <Fragment key={"accordion" + e.type + "i"}>
+                {renderBlock(e)}
+              </Fragment>
+            ))}
+          </AccordionContent>
+        </Accordion>
+      );
     default:
       return (
         renderParagraph(block as ParagraphToken)
@@ -48,7 +76,15 @@ const renderBlock = (block: BlockChildren): ReactNode => {
 const renderParagraph = (p: ParagraphToken) => {
   switch (p.type) {
     case "p":
-      return <p>{p.content.map(renderToken)}</p>;
+      return (
+        <div className="p">
+          {p.content.map((e, i) => (
+            <Fragment key={"p-paragraph" + i + e.type}>
+              {renderToken(e)}
+            </Fragment>
+          ))}
+        </div>
+      );
     case "code":
       return (
         <pre className="whitespace-pre-wrap">
@@ -57,9 +93,9 @@ const renderParagraph = (p: ParagraphToken) => {
       );
     default:
       return (
-        <p className="bg-red-600 text-white">
+        <div className="p bg-red-600 text-white">
           Block or paragraph missing implementation: {p.type}
-        </p>
+        </div>
       );
   }
 };
@@ -68,45 +104,49 @@ const renderToken = (t: Token) => {
   switch (t.type) {
     case "h1":
       return (
-        <p
+        <div
           id={t.raw.toLowerCase().replace(/[^a-z\s]/ig, "").trim().replaceAll(
             " ",
             "-",
           )}
-          className="font-bold text-2xl"
+          className="font-bold text-2xl p"
         >
           {renderInlineToken(t.line)}
-        </p>
+        </div>
       );
     case "h2":
       return (
-        <p
+        <div
           id={t.raw.toLowerCase().replace(/[^a-z\s]/ig, "").trim().replaceAll(
             " ",
             "-",
           )}
-          className="font-bold text-xl"
+          className="font-bold text-xl p"
         >
           {renderInlineToken(t.line)}
-        </p>
+        </div>
       );
     case "h3":
       return (
-        <p
+        <div
           id={t.raw.toLowerCase().replace(/[^a-z\s]/ig, "").trim().replaceAll(
             " ",
             "-",
           )}
-          className="font-bold text-lg"
+          className="font-bold text-lg p"
         >
           {renderInlineToken(t.line)}
-        </p>
+        </div>
       );
     case "p":
       return (
-        <p>
-          {t.lines.map(renderToken)}
-        </p>
+        <div className="p">
+          {t.lines.map((e, i) => (
+            <Fragment key={"p-line" + i + e.type}>
+              {renderInlineToken(e.line)}
+            </Fragment>
+          ))}
+        </div>
       );
     case "text":
       return (
@@ -121,10 +161,10 @@ const renderToken = (t: Token) => {
       return <li className="list-disc ml-8">{renderInlineToken(t.line)}</li>;
     default:
       return (
-        <p className="text-white bg-red-500">
+        <div className="text-white bg-red-500 p">
           Missing implementation for tcMD element `{(t as { type: string })
             .type}`
-        </p>
+        </div>
       );
   }
 };
@@ -132,27 +172,44 @@ const renderToken = (t: Token) => {
 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>
-        );
-      case "image":
-        // eslint-disable-next-line @next/next/no-img-element
-        return <img src={token.data.src} alt={token.content} />;
-      default:
-        return (
-          <span className="bg-red-500">
-            Inline element not implemented: {token.type}
-          </span>
-        );
-    }
-  });
+  return l.map((token) => (
+    <Fragment key={"inline_token" + token.content}>
+      {(() => {
+        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>
+            );
+          case "image":
+            // eslint-disable-next-line @next/next/no-img-element
+            return <img src={token.data.src} alt={token.content} />;
+          case "popover":
+            return (
+              <Poppable
+                content={token.data.popover}
+                preferredAlign="centered"
+                preferredEdge="bottom"
+                className="cursor-pointer"
+              >
+                <span className="border-b border-dotted border-white">
+                  {token.content}
+                </span>
+              </Poppable>
+            );
+          default:
+            return (
+              <span className="bg-red-500">
+                Inline element not implemented: {token.type}
+              </span>
+            );
+        }
+      })()}
+    </Fragment>
+  ));
 };