Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | 24x 7x 7x 13x 4x 4x 7x 4x 4x 4x 4x 4x | import { useEffect } from "react";
import ReactMarkdown from "react-markdown";
import { Row, Col } from "@canonical/react-components";
import mermaid from "mermaid";
import MermaidDiagram from "../MermaidDiagram";
import type {
SectionData,
SubSectionData,
SubSubSectionData,
} from "../../types";
interface UniqueIdItem<T> {
content: T;
id: string;
}
function addUniqueIds<T>(data: T[]): UniqueIdItem<T>[] {
return data.map((item) => ({
content: item,
id: crypto.randomUUID(),
}));
}
function SubSubSection({
interfaceData,
}: {
interfaceData: SubSubSectionData;
}) {
const data = addUniqueIds(interfaceData.children);
return (
<>
<p>{interfaceData.heading}</p>
{data.map((item) => (
<ReactMarkdown key={item.id}>{item.content}</ReactMarkdown>
))}
</>
);
}
function SubSection({ interfaceData }: { interfaceData: SubSectionData }) {
const data = Array.isArray(interfaceData.children)
? addUniqueIds(interfaceData.children)
: [];
return (
<Row>
<Col size={3}>
<h3 className="p-muted-heading">{interfaceData.heading}</h3>
</Col>
<Col size={6}>
{typeof interfaceData.children === "string" ? (
<ReactMarkdown>{interfaceData.children}</ReactMarkdown>
) : (
data.map((item) =>
typeof item.content === "string" ? (
<ReactMarkdown key={item.id}>{item.content}</ReactMarkdown>
) : (
<SubSubSection key={item.id} interfaceData={item.content} />
)
)
)}
</Col>
</Row>
);
}
function DocumentationSection({
interfaceData,
}: {
interfaceData: SectionData;
}) {
const data = addUniqueIds(interfaceData.children);
useEffect(() => {
mermaid.initialize({ startOnLoad: true });
}, []);
return (
<>
<h2 className="p-heading--4">{interfaceData.heading}</h2>
{data.map((item) =>
typeof item.content === "string" ? (
item.content.startsWith("```mermaid") ? (
<MermaidDiagram key={item.id} code={item.content} />
) : (
<ReactMarkdown key={item.id}>{item.content}</ReactMarkdown>
)
) : (
<SubSection key={item.id} interfaceData={item.content} />
)
)}
</>
);
}
export default DocumentationSection;
|