From c0a876322c6410ebbef0f7257b995bbfb76f1205 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Fri, 7 Mar 2025 11:34:17 +0800
Subject: [PATCH] refactor(component): migrate code block with copy feature to
 a more reusable pre component

---
 .../code-block-with-copy.tsx => content/pre.tsx}   | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)
 rename src/components/{mdx/code-block-with-copy.tsx => content/pre.tsx} (88%)

diff --git a/src/components/mdx/code-block-with-copy.tsx b/src/components/content/pre.tsx
similarity index 88%
rename from src/components/mdx/code-block-with-copy.tsx
rename to src/components/content/pre.tsx
index 8d88c96..288b8fc 100644
--- a/src/components/mdx/code-block-with-copy.tsx
+++ b/src/components/content/pre.tsx
@@ -1,18 +1,20 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import { useRef, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { CheckIcon, CopyIcon } from "lucide-react";
+import { ReactNode, useRef, useState } from "react";
 
-interface CodeBlockWithCopyProps {
-  children: React.ReactNode;
+interface PreProps {
+  children?: ReactNode,
+  className?: string;
 }
 
-export function CodeBlockWithCopy({
+export function Pre({
   children,
+  className,
   ...props
-}: CodeBlockWithCopyProps) {
+}: PreProps) {
   const preRef = useRef<HTMLPreElement>(null);
   const [copied, setCopied] = useState<boolean>(false);
   const [hovered, setHovered] = useState<boolean>(false);
@@ -65,7 +67,7 @@ export function CodeBlockWithCopy({
           <CopyIcon size={16} aria-hidden="true" />
         </div>
       </Button>
-      <pre ref={preRef} {...props}>
+      <pre ref={preRef} className={className} {...props}>
         {children}
       </pre>
     </div>