feat : Con more reaible

components/public/lunaris-text.tsx

@@ -0,0 +1,34 @@
+import { Fragment, type ReactNode } from "react";
+
+import { TermDetail } from "@/components/public/term-detail";
+import type { CatalogTextNode } from "@/lib/catalog/lunaris";
+
+function renderNodes(nodes: CatalogTextNode[]): ReactNode {
+  return nodes.map((node, index) => {
+    if (node.type === "text") return <Fragment key={index}>{node.value}</Fragment>;
+    const children = renderNodes(node.children);
+    if (node.type === "color") {
+      return <span key={index} style={{ color: node.value }}>{children}</span>;
+    }
+    if (!node.detail) return <Fragment key={index}>{children}</Fragment>;
+    return (
+      <TermDetail
+        key={index}
+        label={children}
+        title={node.detail.name}
+        detail={node.detail.description}
+        showIcon={false}
+      />
+    );
+  });
+}
+
+export function LunarisText({
+  nodes,
+  fallback,
+}: {
+  nodes?: CatalogTextNode[];
+  fallback: string;
+}) {
+  return <>{nodes?.length ? renderNodes(nodes) : fallback}</>;
+}