refactor: komplettsanierung

apps/web/src/components/DiagramState.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import React from "react";
+import { Mermaid } from "./Mermaid";
+
+interface StateTransition {
+  from: string;
+  to: string;
+  label?: string;
+}
+
+interface DiagramStateProps {
+  states: string[];
+  transitions: StateTransition[];
+  initialState?: string;
+  finalStates?: string[];
+  title?: string;
+  caption?: string;
+  id?: string;
+  showShare?: boolean;
+}
+
+export const DiagramState: React.FC<DiagramStateProps> = ({
+  states,
+  transitions,
+  initialState,
+  finalStates = [],
+  title,
+  caption,
+  id,
+  showShare = true,
+}) => {
+  const stateGraph = `stateDiagram-v2
+${initialState ? `    [*] --> ${initialState}` : ""}
+${transitions
+  .map((t) => {
+    const label = t.label ? ` : ${t.label}` : "";
+    return `    ${t.from} --> ${t.to}${label}`;
+  })
+  .join("\n")}
+${finalStates.map((s) => `    ${s} --> [*]`).join("\n")}`;
+
+  return (
+    <div className="my-12">
+      <Mermaid graph={stateGraph} id={id} title={title} showShare={showShare} />
+      {caption && (
+        <p className="text-center text-xs text-slate-400 mt-4 italic">
+          {caption}
+        </p>
+      )}
+    </div>
+  );
+};