fix(blog): optimize component share logic, typography, and modal layouts

apps/web/src/components/DiagramFlow.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import React from "react";
+import { Mermaid } from "./Mermaid";
+
+interface FlowNode {
+    id: string;
+    label: string;
+    style?: string;
+}
+
+interface FlowEdge {
+    from: string;
+    to: string;
+    label?: string;
+    type?: "solid" | "dotted";
+}
+
+interface DiagramFlowProps {
+    direction?: "LR" | "TB" | "RL" | "BT";
+    nodes?: FlowNode[];
+    edges?: FlowEdge[];
+    title?: string;
+    caption?: string;
+    id?: string;
+    showShare?: boolean;
+    fontSize?: string;
+}
+
+export const DiagramFlow: React.FC<DiagramFlowProps> = ({
+    direction = "LR",
+    nodes = [],
+    edges = [],
+    title,
+    caption,
+    id,
+    showShare = true,
+    fontSize = "16px",
+}) => {
+    const lines: string[] = [`graph ${direction}`];
+
+    // Declare nodes with labels
+    for (const node of nodes) {
+        lines.push(`    ${node.id}[${JSON.stringify(node.label)}]`);
+    }
+
+    // Add edges
+    for (const edge of edges) {
+        const arrow = edge.type === "dotted" ? "-.-" : "-->";
+        const label = edge.label ? `|${edge.label}|` : "";
+        lines.push(`    ${edge.from} ${arrow} ${label}${edge.to}`);
+    }
+
+    // Add styles
+    for (const node of nodes) {
+        if (node.style) {
+            lines.push(`    style ${node.id} ${node.style}`);
+        }
+    }
+
+    const flowGraph = lines.join("\n");
+
+    return (
+        <div className="my-12">
+            <Mermaid
+                graph={flowGraph}
+                id={id}
+                title={title}
+                showShare={showShare}
+                fontSize={fontSize}
+            />
+            {caption && (
+                <div className="text-center text-xs text-slate-400 mt-4 italic">
+                    {caption}
+                </div>
+            )}
+        </div>
+    );
+};