Feat/code blocks with copy

2025-12-07 11:08:54 +05:30
parent b4640ac5e4
commit 641d5f36d2
3 changed files with 68 additions and 7 deletions
@@ -0,0 +1,53 @@
+"use client";
+
+import * as React from "react";
+import { CheckIcon } from "lucide-react";
+import { Button } from "./button";
+import { cn } from "../lib/utils";
+import { Copy } from "lucide-react";
+interface CodeBlockWithCopyProps {
+  code: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function CodeBlockWithCopy({
+  code,
+  children,
+  className,
+}: CodeBlockWithCopyProps) {
+  const [isCopied, setIsCopied] = React.useState(false);
+
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy: ", err);
+    }
+  };
+
+  return (
+    <div className={cn("relative group", className)}>
+      {children}
+      <Button
+        variant="ghost"
+        size="icon"
+        className={cn(
+          "absolute top-2 right-2 h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity",
+          "bg-background/80 backdrop-blur-sm hover:bg-background/90 border border-border/50"
+        )}
+        onClick={copyToClipboard}
+        aria-label="Copy code"
+      >
+        {isCopied ? (
+          <CheckIcon className="h-4 w-4 text-green-500" />
+        ) : (
+          <Copy className="h-4 w-4" />
+        )}
+      </Button>
+    </div>
+  );
+}
+