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,69 +1,74 @@
 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 [copied, setCopied] = useState(false);
-  const handleClick = () => {
-    onClick?.();
-    setCopied(true);
-    setTimeout(() => {
-      setCopied(false);
-    }, 1000);
-  };
+const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
+  ({ onCopy: onClick, className }, ref) => {
+    const [copied, setCopied] = useState(false);
+    const handleClick = () => {
+      onClick?.();
+      setCopied(true);
+      setTimeout(() => {
+        setCopied(false);
+      }, 1000);
+    };
 
-  return (
-    <>
-      <button
-        className={clsx(
-          'flex items-center justify-center',
-          'border rounded-md',
-          'p-[6px] invisible',
-          'group-hover:visible',
-          'transition-opacity dark:border-gray-700',
-          'duration-300',
-          className,
-          styles.btn,
-        )}
-        onClick={handleClick}
-      >
-        <span
+    return (
+      <>
+        <button
+          ref={ref}
           className={clsx(
-            'relative w-5 h-5 text-gray-400 child',
-            'transition-all duration-300',
-            styles.child,
+            'flex items-center justify-center',
+            'border rounded-md',
+            'p-[6px] invisible',
+            'group-hover:visible',
+            'transition-opacity dark:border-gray-700',
+            'duration-300',
+            className,
+            styles.btn,
           )}
+          onClick={handleClick}
         >
-          <svg
+          <span
             className={clsx(
-              'absolute top-0 left-0 fill-current',
-              'opacity-100 transition-all duration-300',
-              copied && styles['on_copy'],
+              'relative w-5 h-5 text-gray-400 child',
+              'transition-all duration-300',
+              styles.child,
             )}
-            viewBox="0 0 24 24"
           >
-            <path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path>
-          </svg>
-          <svg
-            className={clsx(
-              'absolute top-0 left-0 fill-green-400',
-              'scale-[0.33] transition-all duration-300',
-              'opacity-0',
-              copied && styles['on_ok'],
-            )}
-            viewBox="0 0 24 24"
-          >
-            <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
-          </svg>
-        </span>
-      </button>
-    </>
-  );
-};
+            <svg
+              className={clsx(
+                'absolute top-0 left-0 fill-current',
+                'opacity-100 transition-all duration-300',
+                copied && styles['on_copy'],
+              )}
+              viewBox="0 0 24 24"
+            >
+              <path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path>
+            </svg>
+            <svg
+              className={clsx(
+                'absolute top-0 left-0 fill-green-400',
+                'scale-[0.33] transition-all duration-300',
+                'opacity-0',
+                copied && styles['on_ok'],
+              )}
+              viewBox="0 0 24 24"
+            >
+              <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
+            </svg>
+          </span>
+        </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;