feat: enhance workbench with code comparison

Toddyclipsgg · Feb 2, 2025 · f7f8572 · f7f8572
1 parent 3baefdb
commit f7f8572
Show file tree

Hide file tree

Showing 5 changed files with 540 additions and 7 deletions.
diff --git a/app/components/ui/Slider.tsx b/app/components/ui/Slider.tsx
@@ -9,10 +9,11 @@ interface SliderOption<T> {
   text: string;
 }
 
-export interface SliderOptions<T> {
-  left: SliderOption<T>;
-  right: SliderOption<T>;
-}
+export type SliderOptions<T> = {
+  left: { value: T; text: string };
+  middle?: { value: T; text: string };
+  right: { value: T; text: string };
+};
 
 interface SliderProps<T> {
   selected: T;
@@ -21,14 +22,23 @@ interface SliderProps<T> {
 }
 
 export const Slider = genericMemo(<T,>({ selected, options, setSelected }: SliderProps<T>) => {
-  const isLeftSelected = selected === options.left.value;
+  const hasMiddle = !!options.middle;
+  const isLeftSelected = hasMiddle ? selected === options.left.value : selected === options.left.value;
+  const isMiddleSelected = hasMiddle && options.middle ? selected === options.middle.value : false;
 
   return (
     <div className="flex items-center flex-wrap shrink-0 gap-1 bg-bolt-elements-background-depth-1 overflow-hidden rounded-full p-1">
       <SliderButton selected={isLeftSelected} setSelected={() => setSelected?.(options.left.value)}>
         {options.left.text}
       </SliderButton>
-      <SliderButton selected={!isLeftSelected} setSelected={() => setSelected?.(options.right.value)}>
+
+      {options.middle && (
+        <SliderButton selected={isMiddleSelected} setSelected={() => setSelected?.(options.middle!.value)}>
+          {options.middle.text}
+        </SliderButton>
+      )}
+
+      <SliderButton selected={!isLeftSelected && !isMiddleSelected} setSelected={() => setSelected?.(options.right.value)}>
         {options.right.text}
       </SliderButton>
     </div>

diff --git a/app/components/workbench/CodeComparison.tsx b/app/components/workbench/CodeComparison.tsx
@@ -0,0 +1,52 @@
+import { memo } from 'react';
+import { classNames } from '~/utils/classNames';
+
+interface CodeComparisonProps {
+  beforeCode: string;
+  afterCode: string;
+  language: string;
+  filename: string;
+  lightTheme: string;
+  darkTheme: string;
+}
+
+export const CodeComparison = memo(({
+  beforeCode,
+  afterCode,
+  language,
+  filename,
+  lightTheme,
+  darkTheme,
+}: CodeComparisonProps) => {
+  return (
+    <div className="mx-auto w-full">
+      <div className="relative w-full overflow-hidden rounded-xl border border-bolt-elements-borderColor">
+        <div className="relative grid md:grid-cols-2 md:divide-x md:divide-bolt-elements-borderColor">
+          <div>
+            <div className="flex items-center bg-bolt-elements-background-depth-1 p-2 text-sm">
+              <div className="i-ph:file mr-2 h-4 w-4" />
+              {filename}
+              <span className="ml-auto">Original</span>
+            </div>
+            <pre className="h-full overflow-auto break-all bg-bolt-elements-background-depth-1 p-4 font-mono text-xs">
+              {beforeCode}
+            </pre>
+          </div>
+          <div>
+            <div className="flex items-center bg-bolt-elements-background-depth-1 p-2 text-sm">
+              <div className="i-ph:file mr-2 h-4 w-4" />
+              {filename}
+              <span className="ml-auto">Modified</span>
+            </div>
+            <pre className="h-full overflow-auto break-all bg-bolt-elements-background-depth-1 p-4 font-mono text-xs">
+              {afterCode}
+            </pre>
+          </div>
+        </div>
+        <div className="absolute left-1/2 top-1/2 flex h-8 w-8 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-md bg-bolt-elements-background-depth-2 text-xs">
+          VS
+        </div>
+      </div>
+    </div>
+  );
+});