Merge branch 'lesson-page'

json-schema-org · Jul 6, 2024 · 2f9828f · 2f9828f
2 parents b887bd5 + 5219f6a
commit 2f9828f
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 16 deletions.
diff --git a/app/components/EditorNOutput/EditorNOutput.module.css b/app/components/EditorNOutput/EditorNOutput.module.css
@@ -3,6 +3,25 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  gap: 4px;
+
   max-width: 50%;
 }
+
+.outputWrapper {
+  width: 100%;
+
+  /* padding: 16px; */
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  border: 1px solid hsl(var(--border-color));
+  overflow-y: hidden;
+  border-left: none;
+  height: 100%;
+}
+.divider {
+  width: 100%;
+  height: 6px;
+  background-color: hsl(var(--border-color));
+  cursor: row-resize;
+}
diff --git a/app/components/EditorNOutput/EditorNOutput.tsx b/app/components/EditorNOutput/EditorNOutput.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useReducer } from "react";
+import React, { useState, useReducer, useRef } from "react";
 import CodeEditor from "../CodeEditor";
 import styles from "./EditorNOutput.module.css";
 import { Box } from "@chakra-ui/react";
@@ -24,10 +24,49 @@ export default function EditorNOutput({
     errors: "",
     testCaseResults: [],
   });
+  const [topWidth, setTopWidth] = useState(400); // Initial width of the left div
+  const dividerRef = useRef<HTMLDivElement>(null);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isDraggingRef = useRef<HTMLDivElement | boolean>(false);
+
+  const handleMouseDown = () => {
+    isDraggingRef.current = true;
+  };
+
+  const handleMouseUp = () => {
+    isDraggingRef.current = false;
+  };
+
+  const handleMouseMove = (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent> | MouseEvent
+  ) => {
+    if (!isDraggingRef.current) return;
+
+    const containerRect = containerRef.current!.getBoundingClientRect();
+    const newTopWidth = e.clientY - containerRect.top;
+
+    if (newTopWidth > 32) {
+      setTopWidth(newTopWidth);
+    } else {
+      setTopWidth(containerRect.top);
+    }
+  };
 
   return (
-    <div className={styles.codeEditorNOutput}>
-      <Box flex={6} position={"relative"}>
+    <div
+      className={styles.codeEditorNOutput}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}
+      ref={containerRef}
+    >
+      <Box
+        flex={6}
+        height={`${topWidth}px`}
+        position={"relative"}
+        className="top"
+      >
         <CodeEditor
           codeString={codeString}
           setCodeString={setCodeString}
@@ -36,8 +75,17 @@ export default function EditorNOutput({
           nextStepPath={nextStepPath}
         />
       </Box>
-
-      <Output outputResult={output} flex={4} />
+      <div
+        ref={dividerRef}
+        className={styles.divider}
+        onMouseDown={handleMouseDown}
+      ></div>
+      <div
+        className={styles.outputWrapper}
+        style={{ height: `calc(100% - ${topWidth}px - 6px)` }}
+      >
+        <Output outputResult={output} />
+      </div>
     </div>
   );
 }
diff --git a/app/components/Output/Output.module.css b/app/components/Output/Output.module.css
@@ -8,11 +8,12 @@
   border: 1px solid hsl(var(--border-color));
   overflow-y: hidden;
   border-left: none;
+  height: 100%;
 }
 
 .title {
   font-size: small;
-  padding: 0.5em 1em;
+  padding: 0.2em 1em;
 }
 
 .header {
@@ -22,6 +23,7 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  user-select: none;
 }
 .invalid {
   color: red;

diff --git a/app/components/Output/Output.tsx b/app/components/Output/Output.tsx
@@ -7,13 +7,7 @@ import SmallBtn from "../SmallBtn/SmallBtn";
 import { InvalidSchemaError } from "@hyperjump/json-schema/draft-2020-12";
 import { schemaUrl } from "@/lib/validators";
 
-function Output({
-  outputResult,
-  flex,
-}: {
-  outputResult: OutputResult;
-  flex: number;
-}) {
+function Output({ outputResult }: { outputResult: OutputResult }) {
   let outputBodyContent;
 
   if (outputResult.validityStatus == "neutral") {
@@ -64,12 +58,12 @@ function Output({
   }
 
   return (
-    <div className={classnames(styles.output)} style={{ flex: flex }}>
+    <>
       <div className={styles.header}>
         <div className={styles.title}>Output </div>
       </div>
       <div className={classnames(styles.outputBody)}>{outputBodyContent}</div>
-    </div>
+    </>
   );
 }