feat: copy icon on codeblocks in mdx

src/mdx-components.tsx

@@ -1,7 +1,38 @@
+import CopyIcon from "@/image/icons/copy.svg";
 import type { MDXComponents } from "mdx/types";
+import React, { useState } from "react";
+
+const Pre = ({ children, ...props }: React.HTMLAttributes<HTMLElement>) => {
+  const [copied, setCopied] = useState(false);
+
+  const copyCodeHandler = () => {
+    navigator.clipboard
+      .writeText(children.props.children)
+      .then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1000);
+      })
+      .catch((err) => console.error("Failed to copy!", err));
+  };
+
+  return (
+    <div className="relative">
+      <pre {...props}>{children}</pre>
+      <button
+        onClick={copyCodeHandler}
+        className={`absolute right-2 top-2 ${
+          copied ? "text-green-500" : "text-brand-neutral-200"
+        }`}
+      >
+        <CopyIcon width={20} height={20} />
+      </button>
+    </div>
+  );
+};
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
+    pre: Pre,
     ...components,
   };
 }

src/pages/use-cases/cryptos-currency.mdx

@@ -1,5 +1,5 @@
 import MdxLayout from '@/components/MdxLayout';
-import URLInputBox from '@/components/URLInputBox'
+import URLInputBox from '@/components/URLInputBox';
 
 ## Endpoint
 ```http
@@ -9,7 +9,7 @@ import URLInputBox from '@/components/URLInputBox'
 ## Advanced manipulation with JMESPath
 This use case demonstrates a complex manipulation of data using an expression. It queries a CoinGecko API endpoint ([see the raw data](https://api.coingecko.com/api/v3/coins/markets?vs_currency=EUR&order=market_cap_desc&per_page=100&page=1&sparkline=false)) that returns data for over 100 cryptocurrencies. Each cryptocurrency returns an object like this:
 
-```
+```json
 {
   "id": "bitcoin",
   "symbol": "btc",
@@ -26,7 +26,7 @@ Our frontend will use just 5 fields and a shortened list with a slice of 5 curre
 
 To accomplish this modification, the `/cryptos/{currency}` use case applies a JMESPath expression that transforms the data. It looks like this (break lines for simplified reading, must be a one-liner):
 
-```
+```jmespath
 reverse(
     sort_by(
       collection[:5], &name

src/styles/vendor/prism-atom-dark.css

@@ -39,6 +39,18 @@ pre[class*="language-"] {
   background: #1d1f21;
 }
 
+pre {
+  background: #1d1f21 !important;
+  padding: 2em !important;
+  margin: 0 !important;
+  overflow: auto;
+  border-radius: 0.3em;
+}
+
+pre code {
+  padding: 0 !important;
+}
+
 /* Inline code */
 :not(pre) > code[class*="language-"] {
   padding: 0.1em;

tailwind.config.ts

@@ -6,6 +6,7 @@ const config: Config = {
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
+  safelist: ["right-2", "top-2"],
   theme: {
     fontSize: {
       xxs: ["0.625rem", { lineHeight: "0.75rem" }], // 10px
@@ -176,7 +177,6 @@ const config: Config = {
       },
     },
   },
-  plugins: [require('@tailwindcss/typography'),
-  ],
+  plugins: [require("@tailwindcss/typography")],
 };
 export default config;