70 lines
2.9 KiB
TypeScript
70 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
import mermaid from "mermaid";
|
|
import { Block } from "@/lib/api";
|
|
|
|
interface MermaidViewerProps {
|
|
block: Block;
|
|
}
|
|
|
|
export default function MermaidViewer({ block }: MermaidViewerProps) {
|
|
const mermaidRef = useRef<HTMLDivElement>(null);
|
|
const [renderError, setRenderError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
mermaid.initialize({
|
|
startOnLoad: false,
|
|
theme: "default",
|
|
securityLevel: "loose",
|
|
fontFamily: "inherit",
|
|
});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const renderDiagram = async () => {
|
|
if (!mermaidRef.current || !block.mermaid_code) return;
|
|
try {
|
|
setRenderError(null);
|
|
mermaidRef.current.innerHTML = "";
|
|
const { svg } = await mermaid.render(`mermaid-exp-${block.id}`, block.mermaid_code);
|
|
if (mermaidRef.current) {
|
|
mermaidRef.current.innerHTML = svg;
|
|
}
|
|
} catch (error: any) {
|
|
console.error("Mermaid parsing error:", error);
|
|
setRenderError("Error al cargar el diagrama conceptual.");
|
|
}
|
|
};
|
|
|
|
renderDiagram();
|
|
}, [block.mermaid_code, block.id]);
|
|
|
|
return (
|
|
<div className="bg-white dark:bg-black/20 rounded-[3rem] p-8 md:p-12 mb-8 shadow-sm border border-slate-100 dark:border-white/5 relative overflow-hidden group/msview">
|
|
<div className="absolute top-0 right-0 w-64 h-64 bg-indigo-500/5 rounded-full blur-[80px] -translate-y-1/2 translate-x-1/2 group-hover/msview:bg-indigo-500/10 transition-colors"></div>
|
|
|
|
<div className="relative z-10 flex flex-col gap-6">
|
|
<div>
|
|
<h3 className="text-2xl font-black italic tracking-tight text-slate-900 dark:text-white uppercase mb-2">
|
|
{block.title || "Diagrama Interactivo"}
|
|
</h3>
|
|
<p className="text-sm font-bold text-slate-500 dark:text-gray-400">
|
|
{block.description || "Explora el mapa visual a continuación."}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="overflow-x-auto min-h-[200px] flex items-center justify-center bg-slate-50 dark:bg-black/40 rounded-3xl border border-slate-100 dark:border-white/10 p-6 custom-scrollbar">
|
|
{renderError ? (
|
|
<div className="text-red-500 text-sm font-bold bg-red-50 dark:bg-red-500/10 px-6 py-4 rounded-2xl border border-red-100 dark:border-red-500/20">
|
|
{renderError}
|
|
</div>
|
|
) : (
|
|
<div ref={mermaidRef} className="mermaid flex justify-center w-full min-w-max" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|