refactor copy code button

change pre component to server component

components/common/gist-code.tsx

@@ -0,0 +1,25 @@
+import '@catppuccin/highlightjs/sass/catppuccin.variables.scss';
+import GistsCode from 'components/pages/gists/gists-code';
+import { getSignalGist } from 'lib/fetcher';
+
+const GistCode = async ({ id }: { id: string }) => {
+  const gist = await getSignalGist(id);
+
+  if (!gist?.files) {
+    return <div>Error</div>;
+  }
+
+  return (
+    <div>
+      {Object.keys(gist.files).map((f) => (
+        <GistsCode
+          key={gist.files[f].raw_url}
+          file={gist.files[f]}
+          showFileName
+        />
+      ))}
+    </div>
+  );
+};
+
+export default GistCode;

components/mdx/components.ts

@@ -6,6 +6,7 @@ import RUACodeSandbox from 'components/rua/rua-code-sandbox';
 import RUASandpack from 'components/rua/rua-sandpack';
 import Tab from 'components/rua/tab';
 import TabItem from 'components/rua/tab/tab-item';
+import GistCode from 'components/common/gist-code';
 
 const components = {
   RUASandpack,
@@ -16,6 +17,7 @@ const components = {
   TabItem,
   RUACodeSandbox,
   RUACodepen,
+  GistCode,
 };
 
 export default components;

components/mdx/pre.tsx

@@ -1,7 +1,6 @@
-'use client';
-
 import clsx from 'clsx';
 import CopyButton from 'components/post/copy-button';
+import CopyCode from 'components/post/copy-code';
 import useCopyToClipboard from 'lib/hooks/use-copy-to-clipboard';
 import {
   DetailedHTMLProps,
@@ -19,26 +18,11 @@ type Props = {} & DetailedHTMLProps<
 const Pre = ({ ...rest }: Props) => {
   const { children, className, ...props } = rest;
 
-  const preRef = useRef<HTMLPreElement>(null);
-  const { copy } = useCopyToClipboard();
-  const handleCopy = useCallback(() => {
-    if (!preRef.current) throw new Error('Can not access pre element.');
-    if (preRef.current.textContent == null) return;
-    copy(preRef.current.textContent);
-  }, [copy]);
-
   return (
     <>
-      <pre
-        ref={preRef}
-        className={clsx(className, 'relative group')}
-        {...props}
-      >
+      <pre className={clsx(className, 'relative group')} {...props}>
         {children}
-        <CopyButton
-          className={clsx('absolute top-4 right-4', 'translate-y-[-17%]')}
-          onCopy={handleCopy}
-        />
+        <CopyCode />
       </pre>
     </>
   );

components/pages/gists/gists-code.tsx

@@ -15,6 +15,12 @@ interface Props {
   showFileName?: boolean;
 }
 
+/**
+ * Render GitHub gists code.
+ *
+ * @params file
+ * @params showaFileName determine show full content or not
+ */
 const GistsCode = ({ file, showFileName = false }: Props) => {
   const fileContent = showFileName
     ? file.content
@@ -33,7 +39,7 @@ const GistsCode = ({ file, showFileName = false }: Props) => {
   return (
     <>
       {showFileName ? (
-        <div className={styles.wrapper}>
+        <div className={clsx(styles.wrapper, 'relative group')}>
           <div className="h-[30px] bg-[#f6f8fa] dark:bg-[hsl(220,13%,18%)] flex">
             <div className="flex items-center h-full mx-3">
               <div

components/post/copy-button.tsx

@@ -1,13 +1,14 @@
 import clsx from 'clsx';
-import { memo, useState } from 'react';
-import styles from './copyt-button.module.css';
+import { forwardRef, memo, useState } from 'react';
+import styles from './copy-button.module.css';
 
 export type CopyButtonProps = {
   className?: string;
   onCopy?: () => void;
 };
 
-const CopyButton = ({ onCopy: onClick, className }: CopyButtonProps) => {
+const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
+  ({ onCopy: onClick, className }, ref) => {
     const [copied, setCopied] = useState(false);
     const handleClick = () => {
       onClick?.();
@@ -20,6 +21,7 @@ const CopyButton = ({ onCopy: onClick, className }: CopyButtonProps) => {
     return (
       <>
         <button
+          ref={ref}
           className={clsx(
             'flex items-center justify-center',
             'border rounded-md',
@@ -64,6 +66,9 @@ const CopyButton = ({ onCopy: onClick, className }: CopyButtonProps) => {
         </button>
       </>
     );
-};
+  },
+);
+
+CopyButton.displayName = 'CopyButton';
 
 export default memo(CopyButton);

components/post/copy-code.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import clsx from 'clsx';
+import CopyButton from 'components/post/copy-button';
+import useCopyToClipboard from 'lib/hooks/use-copy-to-clipboard';
+import { useCallback, useRef } from 'react';
+
+const CopyCode = () => {
+  const btnRef = useRef<HTMLButtonElement>(null);
+  const { copy } = useCopyToClipboard();
+  const handleCopy = useCallback(() => {
+    if (!btnRef.current?.parentElement)
+      throw new Error('Can not access pre element.');
+    if (btnRef.current.parentElement.textContent == null) return;
+    copy(btnRef.current.parentElement.textContent);
+  }, [copy]);
+
+  return (
+    <>
+      <CopyButton
+        ref={btnRef}
+        className={clsx('absolute top-4 right-4', 'translate-y-[-17%]')}
+        onCopy={handleCopy}
+      />
+    </>
+  );
+};
+
+export default CopyCode;