Add output component

app/[...markdownPath]/page.module.css

@@ -19,13 +19,16 @@
 .mainArea {
   display: flex;
   flex-direction: row;
-  flex: 9;
+  flex: 12;
   height: 100%;
   overflow-y: auto;
   gap: 8px;
 }
 .navBar {
   flex: 1;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  height: min-content;
+  gap: 16px;
+  align-items: center;
 }

app/[...markdownPath]/page.tsx

@@ -3,11 +3,13 @@ import styles from "./page.module.css";
 
 import React, { Suspense } from "react";
 import NavigationBtn from "../components/NavigationBtn";
-import { Button, Flex } from "@chakra-ui/react";
+import { Box, Button, Flex } from "@chakra-ui/react";
 import Link from "next/link";
 import ContentViewer from "../components/ContentViewer/ContentViewer";
 import CodeEditor from "../components/CodeEditor/CodeEditor";
 import { parseMdxFile } from "@/lib/functions";
+import Output from "../components/Output/Output";
+import EditorNOutput from "../components/EditorNOutput/EditorNOutput";
 
 export default async function Content({
   params,
@@ -41,7 +43,7 @@ export default async function Content({
           <NavigationBtn path={previousStepPath} direction="prev" />
           <NavigationBtn path={nextStepPath} direction="next" />
         </div>
-        <Flex gap={4} height={"100%"}>
+        <Flex gap={4}>
           <span>
             Chapter {chapterIndex + 1}: {chapterTitle} (
             {((chapterIndex + 1) / totalChapters) * 100}%)
@@ -58,7 +60,7 @@ export default async function Content({
         <ContentViewer>
           <Page />
         </ContentViewer>
-        <CodeEditor code={codeFile.code} />
+        <EditorNOutput codeFile={codeFile} />
       </div>
     </div>
   );

app/components/CodeEditor/CodeEditor.module.css

@@ -1,8 +1,8 @@
 .codeEditor {
   overflow-y: auto;
   border-radius: 5px;
-  flex: 1;
   padding: 8px;
   border: 1px solid rgba(0, 0, 0, 0.334);
   border-radius: 16px;
+  height: 100%;
 }

app/components/CodeEditor/CodeEditor.tsx

@@ -8,7 +8,6 @@ import Editor from "@monaco-editor/react";
 
 export default function CodeEditor({ code }: { code: Object }) {
   const codeString = JSON.stringify(code, null, 2);
-  console.log(codeString);
   return (
     <div className={ctx(styles.codeEditor, GeistMono.className)}>
       <Editor language="jsonc" defaultValue={codeString} />

app/components/EditorNOutput/EditorNOutput.module.css

@@ -0,0 +1,7 @@
+.codeEditorNOutput {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}

app/components/EditorNOutput/EditorNOutput.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import CodeEditor from "../CodeEditor";
+import styles from "./EditorNOutput.module.css";
+import { Box } from "@chakra-ui/react";
+import Output from "../Output";
+import { CodeFile } from "@/lib/types";
+
+export default function EditorNOutput({ codeFile }: { codeFile: CodeFile }) {
+  return (
+    <div className={styles.codeEditorNOutput}>
+      <Box flex={7}>
+        <CodeEditor code={codeFile.code} />
+      </Box>
+      <Box flex={3}>
+        <Output />
+      </Box>
+    </div>
+  );
+}

app/components/EditorNOutput/index.tsx

@@ -0,0 +1 @@
+export { default as default } from "./EditorNOutput";

app/components/Output/Output.module.css

@@ -0,0 +1,8 @@
+.output {
+  overflow-y: auto;
+  border-radius: 5px;
+  padding: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.334);
+  border-radius: 16px;
+  height: 100%;
+}

app/components/Output/Output.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import styles from "./Output.module.css";
+
+export default function Output() {
+  return <div className={styles.output}>Output</div>;
+}

app/components/Output/index.tsx

@@ -0,0 +1 @@
+export { default as default } from "./Output";

content/01-introduction/01-Your-First-Schema/code.ts

@@ -13,6 +13,15 @@ function validationLogicFunction() {
   console.log("Doing some validation logic here");
 }
 
+const validationSchema = {
+  type: "object",
+  properties: {
+    type: {
+      type: "string",
+    },
+  },
+};
+
 module.exports = {
   code,
   validationLogicFunction,