update

web/components/CopyableCode.tsx

@@ -1,19 +1,24 @@
+
+
 "use client"
 
 import type React from "react"
 import { useState } from "react"
 import { Copy, Check } from "lucide-react"
+import { cn } from "@/lib/utils"
 
 interface CopyableCodeProps {
   code: string
+  language?: string
+  className?: string
 }
 
-const CopyableCode: React.FC<CopyableCodeProps> = ({ code }) => {
+const CopyableCode: React.FC<CopyableCodeProps> = ({ code, language, className }) => {
   const [isCopied, setIsCopied] = useState(false)
 
   const copyToClipboard = async () => {
     try {
-      await navigator.clipboard.writeText(code)
+      await navigator.clipboard.writeText(decodeURIComponent(code))
       setIsCopied(true)
       setTimeout(() => setIsCopied(false), 2000)
     } catch (err) {
@@ -22,16 +27,23 @@ const CopyableCode: React.FC<CopyableCodeProps> = ({ code }) => {
   }
 
   return (
-    <div className="relative my-4">
-      <pre className="bg-gray-100 text-gray-800 p-4 rounded-md overflow-x-auto">
-        <code className="text-sm">{code}</code>
+    <div className={cn("relative w-full", className)}>
+      <pre
+        className={cn(
+          "bg-gray-100 p-2 rounded-md overflow-x-auto",
+          "text-base",
+          "w-full",
+          language ? `language-${language}` : "",
+        )}
+      >
+        <code className="whitespace-pre">{decodeURIComponent(code)}</code>
       </pre>
       <button
         onClick={copyToClipboard}
-        className="absolute top-2 right-2 p-2 bg-white rounded-md shadow-sm hover:bg-gray-200 transition-colors"
-        aria-label="Copy to clipboard"
+        className="absolute top-2 right-2 p-1 bg-white rounded-md shadow-sm hover:bg-gray-100 transition-colors"
+        aria-label="Copy code"
       >
-        {isCopied ? <Check className="h-5 w-5 text-green-500" /> : <Copy className="h-5 w-5 text-gray-500" />}
+        {isCopied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4 text-gray-500" />}
       </button>
     </div>
   )
@@ -40,4 +52,3 @@ const CopyableCode: React.FC<CopyableCodeProps> = ({ code }) => {
 export default CopyableCode
 
 
-