refactor: komplettsanierung

apps/web/src/components/DiagramSequence.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import React from "react";
+import { Mermaid } from "./Mermaid";
+
+interface SequenceMessage {
+  from: string;
+  to: string;
+  message: string;
+  type?: "solid" | "dotted" | "async";
+}
+
+interface DiagramSequenceProps {
+  participants: string[];
+  messages: SequenceMessage[];
+  title?: string;
+  caption?: string;
+  id?: string;
+  showShare?: boolean;
+}
+
+export const DiagramSequence: React.FC<DiagramSequenceProps> = ({
+  participants,
+  messages,
+  title,
+  caption,
+  id,
+  showShare = true,
+}) => {
+  const getArrow = (type?: string) => {
+    switch (type) {
+      case "dotted":
+        return "-->";
+      case "async":
+        return "->>";
+      default:
+        return "->";
+    }
+  };
+
+  const sequenceGraph = `sequenceDiagram
+${participants.map((p) => `    participant ${p}`).join("\n")}
+${messages.map((m) => `    ${m.from}${getArrow(m.type)}${m.to}: ${m.message}`).join("\n")}`;
+
+  return (
+    <div className="my-12">
+      <Mermaid
+        graph={sequenceGraph}
+        id={id}
+        title={title}
+        showShare={showShare}
+      />
+      {caption && (
+        <p className="text-center text-xs text-slate-400 mt-4 italic">
+          {caption}
+        </p>
+      )}
+    </div>
+  );
+};