From 0f4f4195bd4e3a8bad6aca03056e9d247e4cb499 Mon Sep 17 00:00:00 2001
From: MacRimi <123239993+MacRimi@users.noreply.github.com>
Date: Tue, 18 Feb 2025 00:50:41 +0100
Subject: [PATCH] Update CopyableCode.tsx

---
 web/components/CopyableCode.tsx | 33 +++++++++++----------------------
 1 file changed, 11 insertions(+), 22 deletions(-)

diff --git a/web/components/CopyableCode.tsx b/web/components/CopyableCode.tsx
index 295767d..9a931e5 100644
--- a/web/components/CopyableCode.tsx
+++ b/web/components/CopyableCode.tsx
@@ -3,20 +3,17 @@
 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, language, className }) => {
+const CopyableCode: React.FC<CopyableCodeProps> = ({ code }) => {
   const [isCopied, setIsCopied] = useState(false)
 
   const copyToClipboard = async () => {
     try {
-      await navigator.clipboard.writeText(decodeURIComponent(code))
+      await navigator.clipboard.writeText(code)
       setIsCopied(true)
       setTimeout(() => setIsCopied(false), 2000)
     } catch (err) {
@@ -25,30 +22,22 @@ const CopyableCode: React.FC<CopyableCodeProps> = ({ code, language, className }
   }
 
   return (
-    <div className={cn("relative w-full", className)}>
-      <pre
-        className={cn(
-          "bg-gray-100 p-2 sm:p-3 md:p-4 rounded-md overflow-x-auto",
-          "text-xs sm:text-sm md:text-base",
-          "max-w-full",
-          language ? `language-${language}` : "",
-        )}
-      >
-        <code className="whitespace-pre">{decodeURIComponent(code)}</code>
+    <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>
       </pre>
       <button
         onClick={copyToClipboard}
-        className="absolute top-1 right-1 sm:top-2 sm:right-2 p-1 sm:p-2 bg-white rounded-md shadow-sm hover:bg-gray-100 transition-colors"
-        aria-label="Copy code"
+        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"
       >
-        {isCopied ? (
-          <Check className="h-3 w-3 sm:h-4 sm:w-4 text-green-500" />
-        ) : (
-          <Copy className="h-3 w-3 sm:h-4 sm:w-4 text-gray-500" />
-        )}
+        {isCopied ? <Check className="h-5 w-5 text-green-500" /> : <Copy className="h-5 w-5 text-gray-500" />}
       </button>
     </div>
   )
 }
 
 export default CopyableCode
+
+
+