diff --git a/src/components/RefinePromptModal/CompareFunctions.tsx b/src/components/RefinePromptModal/CompareFunctions.tsx index 276481a..8b8561f 100644 --- a/src/components/RefinePromptModal/CompareFunctions.tsx +++ b/src/components/RefinePromptModal/CompareFunctions.tsx @@ -1,10 +1,21 @@ -import { HStack, VStack } from "@chakra-ui/react"; +import { HStack, VStack, useBreakpointValue } from "@chakra-ui/react"; import React from "react"; import DiffViewer, { DiffMethod } from "react-diff-viewer"; import Prism from "prismjs"; import "prismjs/components/prism-javascript"; import "prismjs/themes/prism.css"; // choose a theme you like +const highlightSyntax = (str: string) => { + let highlighted; + try { + highlighted = Prism.highlight(str, Prism.languages.javascript as Prism.Grammar, "javascript"); + } catch (e) { + console.error("Error highlighting:", e); + highlighted = str; + } + return
;
+};
+
 const CompareFunctions = ({
   originalFunction,
   newFunction = "",
@@ -12,23 +23,24 @@ const CompareFunctions = ({
   originalFunction: string;
   newFunction?: string;
 }) => {
-  const highlightSyntax = (str: string) => {
-    let highlighted;
-    try {
-      highlighted = Prism.highlight(str, Prism.languages.javascript as Prism.Grammar, "javascript");
-    } catch (e) {
-      console.error("Error highlighting:", e);
-      highlighted = str;
-    }
-    return 
;
-  };
+  const showSplitView = useBreakpointValue(
+    {
+      base: false,
+      md: true,
+    },
+    {
+      fallback: "base",
+    },
+  );
+
   return (