Add Solve button to EditorNOutput component

json-schema-org · May 26, 2024 · e2892d5 · e2892d5
1 parent aed5320
commit e2892d5
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 13 deletions.
diff --git a/app/components/EditorNOutput/EditorNOutput.tsx b/app/components/EditorNOutput/EditorNOutput.tsx
@@ -3,7 +3,7 @@
 import React, { useMemo, useState } from "react";
 import CodeEditor from "../CodeEditor";
 import styles from "./EditorNOutput.module.css";
-import { Box, Button } from "@chakra-ui/react";
+import { Box, Button, Flex } from "@chakra-ui/react";
 import Output from "../Output";
 import { CodeFile } from "@/lib/types";
 
@@ -39,18 +39,30 @@ export default function EditorNOutput({ codeFile }: { codeFile: CodeFile }) {
       <Box flex={6}>
         <CodeEditor code={codeString} setCode={setCodeString} />
       </Box>
-      <Button
-        className={styles.validateBtn}
-        variant={"default"}
-        onClick={validateCode}
-        size={"xs"}
-        width={"min-content"}
-        alignSelf={"flex-end"}
-        textTransform={"uppercase"}
-      >
-        Validate
-      </Button>
-
+      <Flex alignSelf={"flex-start"} gap={"4px"}>
+        <Button
+          className={styles.validateBtn}
+          variant={"default"}
+          onClick={validateCode}
+          size={"xs"}
+          width={"min-content"}
+          textTransform={"uppercase"}
+        >
+          Validate
+        </Button>
+        <Button
+          className={styles.validateBtn}
+          variant={"success"}
+          onClick={() =>
+            setCodeString(JSON.stringify(codeFile.solution, null, 2))
+          }
+          size={"xs"}
+          width={"min-content"}
+          textTransform={"uppercase"}
+        >
+          Solve
+        </Button>
+      </Flex>
       <Output isValid={isValid} flex={4}>
         {output}
       </Output>

diff --git a/content/01-introduction/01-Your-First-Schema/code.ts b/content/01-introduction/01-Your-First-Schema/code.ts
@@ -44,7 +44,20 @@ const validationSchema = {
   required: ["type", "properties"],
 };
 
+const solution = {
+  type: "object",
+  properties: {
+    name: {
+      type: "string",
+    },
+    age: {
+      type: "number",
+    },
+  },
+};
+
 module.exports = {
   code,
   validationSchema,
+  solution,
 };
diff --git a/lib/types.ts b/lib/types.ts
@@ -23,6 +23,7 @@ export type Metadata = {
 export type CodeFile = {
   code: Object;
   validationSchema: Object;
+  solution: Object;
 };
 export type CodeFileExports = {
   exports: CodeFile;