From 4aad78b671367e937088b621c0182e6710073533 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Mon, 3 Mar 2025 10:40:01 +0800
Subject: [PATCH] feat(@workspace/@editor): add CopyButton component

---
 .../@editor/components/copy-button.tsx        | 70 +++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 src/app/(app)/playground/@workspace/@editor/components/copy-button.tsx

diff --git a/src/app/(app)/playground/@workspace/@editor/components/copy-button.tsx b/src/app/(app)/playground/@workspace/@editor/components/copy-button.tsx
new file mode 100644
index 0000000..984ca04
--- /dev/null
+++ b/src/app/(app)/playground/@workspace/@editor/components/copy-button.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { useState } from "react";
+import { Check, Copy } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useCodeEditorState } from "@/store/useCodeEditor";
+
+export default function CopyButton() {
+  const [copied, setCopied] = useState(false);
+  const { editor } = useCodeEditorState();
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(editor?.getValue() || "");
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch (err) {
+      console.error("Failed to copy text: ", err);
+    }
+  };
+
+  return (
+    <TooltipProvider delayDuration={0}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-6 w-6 border-none px-1.5 py-0.5 disabled:opacity-100 hover:bg-muted"
+            onClick={handleCopy}
+            aria-label={copied ? "Copied" : "Copy to clipboard"}
+            disabled={copied}
+          >
+            <div
+              className={cn(
+                "transition-all",
+                copied ? "scale-100 opacity-100" : "scale-0 opacity-0"
+              )}
+            >
+              <Check
+                className="stroke-emerald-500"
+                size={16}
+                strokeWidth={2}
+                aria-hidden="true"
+              />
+            </div>
+            <div
+              className={cn(
+                "absolute transition-all",
+                copied ? "scale-0 opacity-0" : "scale-100 opacity-100"
+              )}
+            >
+              <Copy size={16} strokeWidth={2} aria-hidden="true" />
+            </div>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent className="px-2 py-1 text-xs">
+          Click to Copy
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}