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 (