feat: add button to copy mdx in error.tsx

incubateur-ademe · Dec 4, 2024 · bd8703b · bd8703b
1 parent bccb3a4
commit bd8703b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/src/app/blog/playground/error.tsx b/src/app/blog/playground/error.tsx
@@ -1,6 +1,11 @@
-"use client"; // Error components must be Client Components
+"use client";
+import { Button } from "@/components/Button";
+
+// Error components must be Client Components
 
 export default function Error({ error, reset: _reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  const mdxContent = localStorage.getItem("mdxContent");
+
   return (
     <div className="col-start-2 mt-4 p-8">
       <p>Erreur du playground</p>
@@ -18,8 +23,21 @@ export default function Error({ error, reset: _reset }: { error: Error & { diges
       <details>
         <summary>Détails</summary>
 
+        <div className="py-4">
+          <Button
+            size="small"
+            priority="secondary"
+            onClick={() => {
+              if (mdxContent) {
+                navigator.clipboard.writeText(mdxContent).catch(console.error);
+              }
+            }}
+          >
+            Copier le code
+          </Button>
+        </div>
         <p>
-          <pre>{localStorage.getItem("mdxContent")}</pre>
+          <pre>{mdxContent}</pre>
         </p>
       </details>
 

diff --git a/src/app/blog/playground/page.tsx b/src/app/blog/playground/page.tsx
@@ -167,8 +167,6 @@ export default function MDXEditorPage() {
     setMdxContent(completeSample);
   };
 
-  console.log("fronmatter", frontmatter);
-
   const copy = async () => {
     await navigator.clipboard.writeText(mdxContent);
   };