feat: add custom code tag to markdown

src/app/components/Code.tsx

@@ -0,0 +1,15 @@
+import styles from './Code.module.css';
+
+export default function Code({
+  children,
+  language,
+}: {
+  children: string;
+  language: string;
+}) {
+  return (
+    <pre className={styles.pre}>
+      <code className={styles.code}>{children}</code>
+    </pre>
+  );
+}

src/app/components/Section.module.css

@@ -17,4 +17,9 @@
 
 .container>article {
   flex: 1;
+}
+
+.container>article>p {
+  margin-top: 20px;
+  color: #c1c9d2
 }

src/app/components/Section.tsx

@@ -1,18 +1,14 @@
+import { ReactNode } from 'react';
 import styles from './Section.module.css';
 
 export default function Section({
-  copy,
-  example,
+  children,
 }: {
-  copy: string;
-  example: string;
+  children: ReactNode;
 }) {
   return (
-    <section
-      className={styles.container}
-      dangerouslySetInnerHTML={{
-        __html: `${copy}${example}`,
-      }}
-    ></section>
+    <section className={styles.container}>
+      {children}
+    </section>
   );
 }

src/app/components/SideBar.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { useState } from 'react';
-import { DocsStructure } from '../types/types.js';
+import { Doc, DocsStructure } from '../types/types.js';
 import styles from './SideBar.module.css';
 
-function TreeNode({ doc }: { doc: DocsStructure }) {
+function TreeNode({ doc }: { doc: Doc }) {
   const [isExpanded, setIsExpanded] =
     useState<boolean>(true);
 
@@ -62,7 +62,7 @@ function TreeNode({ doc }: { doc: DocsStructure }) {
   );
 }
 
-function ListTree({ docs }: { docs: DocsStructure[] }) {
+function ListTree({ docs }: { docs: Doc[] }) {
   return (
     <ul className={styles.list}>
       {docs.map(d => (
@@ -76,8 +76,8 @@ export default function SideBar({
   versionOne,
   versionTwo,
 }: {
-  versionOne: DocsStructure[];
-  versionTwo: DocsStructure[];
+  versionOne: DocsStructure;
+  versionTwo: DocsStructure;
 }) {
   return (
     <div className={styles.container}>
@@ -85,7 +85,7 @@ export default function SideBar({
         <span className={styles.onspring}>Onspring</span>{' '}
         <span className={styles.api}>API</span>
       </h1>
-      <ListTree docs={versionTwo} />
+      <ListTree docs={versionTwo.docs} />
     </div>
   );
 }