refactor: komplettsanierung

apps/web/src/components/DiagramTimeline.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import React from "react";
+import { Mermaid } from "./Mermaid";
+
+interface TimelineEvent {
+  year: string;
+  title: string;
+}
+
+interface DiagramTimelineProps {
+  events: TimelineEvent[];
+  title?: string;
+  caption?: string;
+  id?: string;
+  showShare?: boolean;
+}
+
+export const DiagramTimeline: React.FC<DiagramTimelineProps> = ({
+  events,
+  title,
+  caption,
+  id,
+  showShare = true,
+}) => {
+  const timelineGraph = `timeline
+    title ${title || "Timeline"}
+${events.map((event) => `    ${event.year} : ${event.title}`).join("\n")}`;
+
+  return (
+    <div className="my-12">
+      <Mermaid
+        graph={timelineGraph}
+        id={id}
+        title={title}
+        showShare={showShare}
+      />
+      {caption && (
+        <p className="text-center text-xs text-slate-400 mt-4 italic">
+          {caption}
+        </p>
+      )}
+    </div>
+  );
+};