49 lines
950 B
TypeScript
49 lines
950 B
TypeScript
"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;
|
|
fontSize?: string;
|
|
}
|
|
|
|
export const DiagramTimeline: React.FC<DiagramTimelineProps> = ({
|
|
events,
|
|
title,
|
|
caption,
|
|
id,
|
|
showShare = true,
|
|
fontSize = "16px",
|
|
}) => {
|
|
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}
|
|
fontSize={fontSize}
|
|
/>
|
|
{caption && (
|
|
<div className="text-center text-xs text-slate-400 mt-4 italic">
|
|
{caption}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|