chore: add view solution button

json-schema-org · Jul 6, 2024 · 22520bc · 22520bc
1 parent 009aa50
commit 22520bc
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 5 deletions.
diff --git a/app/components/EditorNOutput/EditorNOutput.tsx b/app/components/EditorNOutput/EditorNOutput.tsx
@@ -19,6 +19,10 @@ export default function EditorNOutput({
     JSON.stringify(codeFile.code, null, 2)
   );
 
+  const showSolution = () => {
+    setCodeString(JSON.stringify(codeFile.solution, null, 2));
+  };
+
   const [output, dispatchOutput] = useReducer(outputReducer, {
     validityStatus: "neutral",
     errors: "",
@@ -93,7 +97,7 @@ export default function EditorNOutput({
         className={styles.outputWrapper}
         style={{ height: `calc(100% - ${topWidth}px - 6px)` }}
       >
-        <Output outputResult={output} />
+        <Output outputResult={output} showSolution={showSolution} />
       </div>
     </div>
   );

diff --git a/app/components/Output/Output.module.css b/app/components/Output/Output.module.css
@@ -35,6 +35,8 @@
   overflow-y: scroll;
   height: 100%;
   white-space: pre-wrap;
+  display: flex;
+  flex-direction: column;
 }
 .valid {
   display: flex;
@@ -59,3 +61,8 @@
   display: flex;
   justify-content: center;
 }
+.footer {
+  margin-top: auto;
+  font-size: small;
+  padding: 0.2em 0.2em;
+}
diff --git a/app/components/Output/Output.tsx b/app/components/Output/Output.tsx
@@ -7,19 +7,25 @@ import SmallBtn from "../SmallBtn/SmallBtn";
 import { InvalidSchemaError } from "@hyperjump/json-schema/draft-2020-12";
 import { schemaUrl } from "@/lib/validators";
 
-function Output({ outputResult }: { outputResult: OutputResult }) {
+function Output({
+  outputResult,
+  showSolution,
+}: {
+  outputResult: OutputResult;
+  showSolution: () => void;
+}) {
   let outputBodyContent;
 
   if (outputResult.validityStatus == "neutral") {
     outputBodyContent = (
-      <>
+      <div>
         {" "}
         Please click the{" "}
         <SmallBtn variant="default" onClick={() => {}}>
           validate
         </SmallBtn>{" "}
         button to see the output
-      </>
+      </div>
     );
   } else if (outputResult.validityStatus == "valid") {
     outputBodyContent = (
@@ -62,7 +68,25 @@ function Output({ outputResult }: { outputResult: OutputResult }) {
       <div className={styles.header}>
         <div className={styles.title}>Output </div>
       </div>
-      <div className={classnames(styles.outputBody)}>{outputBodyContent}</div>
+
+      <div className={classnames(styles.outputBody)}>
+        {outputBodyContent}
+        {outputResult.validityStatus !== "neutral" &&
+          outputResult.validityStatus !== "valid" && (
+            <div className={styles.footer}>
+              Stuck?{" "}
+              <button
+                onClick={showSolution}
+                style={{
+                  color: "hsl(var(--link-color))",
+                  textDecoration: "underline",
+                }}
+              >
+                View Solution
+              </button>
+            </div>
+          )}
+      </div>
     </>
   );
 }