copy button and clear all steps button

Author: jakedoublev

src/components/OutputBox.tsx

@@ -1,25 +1,35 @@
-import React from "react";
+import React, { useState } from "react";
 
-interface OutputBoxProps {
+type OutputBoxProps = {
     output: string;
-}
+};
+
+export default function OutputBox({ output }: OutputBoxProps) {
+    const [copied, setCopied] = useState(false);
 
-const OutputBox: React.FC<OutputBoxProps> = ({ output }) => (
-    <div style={{ marginTop: "16px" }}>
-        <h2 style={{ fontSize: "18px", fontWeight: "bold" }}>Output</h2>
-        <textarea
-            style={{
-                width: "100%",
-                padding: "8px",
-                borderRadius: "4px",
-                border: "1px solid #ccc",
-                backgroundColor: "#f7f7f7",
-            }}
-            rows={6}
-            readOnly
-            value={output}
-        />
-    </div>
-);
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(output);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        } catch (err) {
+            console.error("Failed to copy:", err);
+        }
+    };
 
-export default OutputBox;
+    return (
+        <div style={{ marginTop: "16px" }}>
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                <h3>Output</h3>
+                <button onClick={handleCopy} style={{ padding: "4px 8px", fontSize: "0.9rem" }}>
+                    {copied ? "Copied!" : "Copy"}
+                </button>
+            </div>
+            <textarea
+                readOnly
+                value={output}
+                style={{ width: "100%", height: "200px", fontFamily: "monospace", marginTop: "8px" }}
+            />
+        </div>
+    );
+}

src/components/TransformationList.tsx

@@ -7,17 +7,20 @@ interface TransformationListProps {
     addStep: (transformation: keyof typeof transformations) => void;
     getValidTransformations: (type: DataType) => { key: string; label: string }[];
     currentType: DataType;
+    clearSteps: () => void;
 }
 
 const TransformationList: React.FC<TransformationListProps> = ({
     steps,
     removeStep,
     addStep,
+    clearSteps,
     getValidTransformations,
     currentType,
 }) => (
     <div style={{ marginTop: "16px" }}>
         <h2 style={{ fontSize: "18px", fontWeight: "bold" }}>Transformation Steps</h2>
+        {steps.length > 0 && <button onClick={clearSteps}>Clear All Steps</button>}
         <ul style={{ listStyle: "none", padding: 0 }}>
             {steps.map((step, i) => (
                 <li key={step.id} style={{ display: "flex", alignItems: "center", marginBottom: "8px" }}>

src/pages/ToolBox.tsx

@@ -63,6 +63,8 @@ export function Toolbox() {
             .map(([key, t]) => ({ key, label: t.label }));
     };
 
+    const clearSteps = () => setSteps([]);
+
     let lastType = inputType;
     try {
         let cur: any = input;
@@ -89,6 +91,7 @@ export function Toolbox() {
                 steps={steps}
                 removeStep={removeStep}
                 addStep={addStep}
+                clearSteps={clearSteps}
                 getValidTransformations={getValidTransformations}
                 currentType={lastType}
             />