1 files changed, 46 insertions, 0 deletions
diff --git a/src/lib/Markdown/Section.tsx b/src/lib/Markdown/Section.tsx
new file mode 100644
index 0000000..5ce8954
--- /dev/null
+++ b/src/lib/Markdown/Section.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import ContentSection from '../ContentSection/ContentSection';
+import Content from './Content';
+import { ParserPropTypes } from './types';
+
+interface PropTypes extends ParserPropTypes {
+  level?: number;
+}
+
+const getHeaderLevel = (header: string): number => {
+  if (!header) return 0;
+  let level = 0;
+  while(header[level] === '#') level++;
+  return level;
+}
+
+const ChildrenSections: React.FC<PropTypes> = ({ rawLines, level = 0 }) => {
+  const childrenSectionLines = rawLines.reduce((sections: string[][], line: string) => {
+    if (line) {
+      if (getHeaderLevel(line) === level) sections.push([]);
+      if (sections.length) sections[sections.length - 1].push(line);
+    }
+    return sections;
+  }, []);
+  const children = childrenSectionLines.map(sectionLines => <Section rawLines={sectionLines} level={level}/>);
+  return <> {children} </>;
+}
+
+const Section: React.FC<PropTypes> = ({ rawLines, level = 0 }) => {
+  const deeperLevelIndex = rawLines.findIndex(line => line.match(`^#{${level + 1},} .*$`));
+  const rawContent = rawLines.splice(0, (deeperLevelIndex < 0) ? rawLines.length : deeperLevelIndex);
+
+  if (!level) return <ChildrenSections rawLines={rawLines} level={getHeaderLevel(rawLines[0])}/>;
+
+  const sectionName = rawContent.splice(0, 1)[0].slice(level).trim();
+  const deeperLevel = getHeaderLevel(rawLines[0]);
+  return (
+    <ContentSection sectionName={sectionName} level={level}>
+      <Content rawLines={rawContent} />
+      <ChildrenSections rawLines={rawLines} level={deeperLevel} />
+    </ContentSection>
+  );
+}
+
+export default Section;
+