Update page.tsx

web/app/guides/[slug]/page.tsx

@@ -2,6 +2,11 @@ import fs from "fs"
 import path from "path"
 import { remark } from "remark"
 import html from "remark-html"
+import dynamic from "next/dynamic"
+import React from "react"
+
+
+const CopyableCode = dynamic(() => import("@/components/CopyableCode"), { ssr: false })
 
 async function getGuideContent(slug: string) {
   const guidePath = path.join(process.cwd(), "..", "guides", `${slug}.md`)
@@ -18,23 +23,26 @@ export async function generateStaticParams() {
   }))
 }
 
+
+function wrapCodeBlocksWithCopyable(content: string) {
+  return content.split(/(<pre><code>[\s\S]*?<\/code><\/pre>)/g).map((segment, index) => {
+    const match = segment.match(/<pre><code>([\s\S]*?)<\/code><\/pre>/)
+    if (match) {
+      const codeContent = match[1].trim()
+      return React.createElement(CopyableCode, { code: codeContent, key: index })
+    }
+    return segment
+  })
+}
+
 export default async function GuidePage({ params }: { params: { slug: string } }) {
   const guideContent = await getGuideContent(params.slug)
-
+  const wrappedContent = wrapCodeBlocksWithCopyable(guideContent)
-  // Función para envolver los bloques de código con CopyableCode
-  const wrapCodeBlocks = (content: string) => {
-    return content.replace(
-      /<pre><code>([\s\S]*?)<\/code><\/pre>/g,
-      (match, code) => `<CopyableCode code="${encodeURIComponent(code.trim())}" />`,
-    )
-  }
-
-  const wrappedContent = wrapCodeBlocks(guideContent)
 
   return (
     <div className="min-h-screen bg-white text-gray-900">
       <div className="container mx-auto px-4 py-16 max-w-3xl">
-        <div className="prose max-w-none" dangerouslySetInnerHTML={{ __html: wrappedContent }} />
+        <div className="prose max-w-none">{wrappedContent}</div>
       </div>
     </div>
   )