added coppy button

Author: ariflogs

components/CodeBlock.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/packages/ui";
+
+interface ICodeBlock extends React.HTMLAttributes<HTMLPreElement> {}
+
+export async function copyToClipboardWithMeta(value: string, event?: Event) {
+  navigator.clipboard.writeText(value);
+  if (event) {
+    // trackEvent(event);
+  }
+}
+
+export function CodeBlock({ className, children, ...props }: ICodeBlock) {
+  const [hasCopied, setHasCopied] = React.useState(false);
+  const preRef = React.useRef<HTMLPreElement>(null);
+
+  const handleClickCopy = async () => {
+    const code = preRef.current?.textContent;
+    if (code) {
+      setHasCopied(true);
+      await navigator.clipboard.writeText(code);
+
+      setTimeout(() => {
+        setHasCopied(false);
+      }, 3000);
+    }
+  };
+  return (
+    <pre
+      className={cn(
+        "relative overflow-x-auto rounded bg-[#282A36] mt-3 mb-6 p-4",
+        className
+      )}
+      {...props}
+    >
+      <Button
+        disabled={hasCopied}
+        className="absolute top-4 right-4 z-10"
+        size="sm"
+        onClick={handleClickCopy}
+      >
+        {hasCopied ? "Copied" : "Copy"}
+      </Button>
+      <span ref={preRef}>{children}</span>
+    </pre>
+  );
+}

components/ComponentShowcase.tsx

@@ -1,8 +1,6 @@
 import { componentConfig } from "@/config";
-import { H5 } from "@/packages/ui";
 import { TabGroup, TabList, TabPanels, TabPanel, Tab } from "@headlessui/react";
 import React, { HTMLAttributes } from "react";
-import { CopyButton } from "./CopyButton";
 
 interface IComponentShowcase extends HTMLAttributes<HTMLDivElement> {
   name: keyof typeof componentConfig.examples;
@@ -29,10 +27,7 @@ export function ComponentShowcase({ name, children }: IComponentShowcase) {
           </div>
         </TabPanel>
         <TabPanel>
-          <div className="relative rounded overflow-auto">
-            <CopyButton value={Code.toString()} />
-            {Code}
-          </div>
+          <div className="relative rounded overflow-auto">{Code}</div>
         </TabPanel>
       </TabPanels>
     </TabGroup>

components/CopyButton.tsx

@@ -1,9 +1,12 @@
+"use client";
+
 import { H1, H2, H3, H4, H5, H6 } from "@/packages/ui";
 import { useMDXComponent } from "next-contentlayer/hooks";
 import React, { HTMLAttributes } from "react";
 import { ComponentShowcase } from "./ComponentShowcase";
 import { cn } from "@/lib/utils";
 import { ComponentSource } from "./ComponentSource";
+import { CodeBlock } from "./CodeBlock";
 
 const components = {
   h1: H1,
@@ -18,21 +21,7 @@ const components = {
   ),
   h5: H5,
   h6: H6,
-  pre: ({
-    className,
-    children,
-    ...props
-  }: React.HTMLAttributes<HTMLElement>) => (
-    <pre
-      className={cn(
-        "overflow-x-auto rounded bg-[#282A36] mt-3 mb-6 p-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </pre>
-  ),
+  pre: CodeBlock,
   code: ({
     className,
     children,

components/MDX.tsx

@@ -47,7 +47,7 @@ export default makeSource({
               u("element", {
                 tagName: "pre",
                 properties: {
-                  __src__: source,
+                  __src__: filePath,
                 },
                 children: [
                   u("element", {
@@ -65,6 +65,8 @@ export default makeSource({
                 ],
               })
             );
+
+            return;
           }
 
           if (node.name === "ComponentShowcase" && node.attributes) {
@@ -78,21 +80,13 @@ export default makeSource({
             const component = componentConfig.examples[name];
             const filePath = path.join(process.cwd(), component.filePath);
             const source = fs.readFileSync(filePath, "utf8");
-            // const cleanedJSX = source
-            //   .replace(/export default function \w+\(\) \{\n?/g, "") // removes function wrapper
-            //   .replace(/return\s*\(\s*/g, "") // removes return statement
-            //   .replace(/\n\s*\);?\s*\}\s*$/g, "") // Removes closing parenthesis, semicolon, and closing brace at the end of the function
-            //   .replace(/\n\s*\n/g, "\n") // removes extra new lines
-            //   .trim()
-            //   .split("\n")
-            //   .map((line) => line.replace(/^ {4}/gm, ""))
-            //   .join("\n");
 
             node.children?.push(
               u("element", {
                 tagName: "pre",
                 properties: {
                   __src__: component.filePath,
+                  __rawString__: source,
                 },
                 children: [
                   u("element", {
@@ -110,6 +104,8 @@ export default makeSource({
                 ],
               })
             );
+
+            return;
           }
         });
         return null;

contentlayer.config.ts

@@ -1,14 +1,14 @@
-import { Node } from "unist-builder"
+import { Node } from "unist-builder";
 
 export interface UnistNode extends Node {
-  type: string
-  name?: string
-  tagName?: string
-  value?: string
+  type: string;
+  name?: string;
+  tagName?: string;
+  value?: string;
   attributes?: {
-    name: string
-    value: unknown
-    type?: string
-  }[]
-  children?: UnistNode[]
-}
+    name: string;
+    value: unknown;
+    type?: string;
+  }[];
+  children?: UnistNode[];
+}