feat: get to displaying markdown copy

src/app/components/Article.module.css

@@ -1,14 +0,0 @@
-.container {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  gap: 1rem;
-}
-
-.copy {
-  flex: 1;
-}
-
-.example {
-  flex: 1;
-}

src/app/components/Article.tsx

@@ -1,14 +0,0 @@
-import styles from './Article.module.css';
-
-export default function Article() {
-  return (
-    <article className={styles.container}>
-      <section className={styles.copy}>
-        This is the copy
-      </section>
-      <section className={styles.example}>
-        This is the example
-      </section>
-    </article>
-  );
-}

src/app/components/NavBar.module.css

@@ -2,8 +2,10 @@
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  padding: 0 1rem;
+  padding: 1rem;
   width: 100%;
+  max-width: 1450px;
+  margin: 0 auto;
 }
 
 .navList {

src/app/components/Section.module.css

@@ -0,0 +1,20 @@
+.container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 1rem;
+  border-bottom: 1px solid #848586;
+  padding: 5rem;
+}
+
+@media screen and (max-width: 1000px) {
+  .container {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+  }
+}
+
+.container>article {
+  flex: 1;
+}

src/app/components/Section.tsx

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

src/app/components/SideBar.tsx

@@ -14,13 +14,11 @@ function TreeNode({ doc }: { doc: DocsStructure }) {
   return (
     <li className={styles.listItem}>
       {hasChildren ? (
-        <div className={styles.expandable}>
-          <a
-            onClick={() => setIsExpanded(!isExpanded)}
-            className={styles.link}
-          >
-            {doc.title}
-          </a>
+        <div
+          onClick={() => setIsExpanded(!isExpanded)}
+          className={styles.expandable}
+        >
+          <a className={styles.link}>{doc.title}</a>
           {isExpanded ? (
             <svg
               xmlns="http://www.w3.org/2000/svg"