chore: enhance MDX component fix copy button and localization updates

- Add __rawString__ property to MDX component for improved code handling.
- Refactor pre element to extract code content dynamically and support copy functionality.
- Update login translation in English to "Log in" for consistency.

content-collections.ts

@@ -322,7 +322,12 @@ const compileWithCodeCopy = async (
           if (node?.type === "element" && node?.tagName === "pre") {
             const [codeEl] = node.children;
             if (codeEl.tagName !== "code") return;
-            node.__rawString__ = codeEl.children?.[0]?.value;
+            
+            // add __rawString__ as a property that will be passed to the React component
+            if (!node.properties) {
+              node.properties = {};
+            }
+            node.properties.__rawString__ = codeEl.children?.[0]?.value;
           }
         });
       },

messages/en.json

@@ -4,7 +4,7 @@
     "tagline": "Make AI SaaS in hours, simply and effortlessly"    
   },
   "Common": {
-    "login": "Login",
+    "login": "Log in",
     "logout": "Log out",
     "signUp": "Sign up",
     "theme": "Toggle theme",

src/app/[locale]/auth/login/page.tsx

@@ -4,7 +4,7 @@ import { constructMetadata } from '@/lib/metadata';
 import { getBaseUrlWithLocale } from '@/lib/urls/get-base-url';
 import { Routes } from '@/routes';
 import { Metadata } from 'next';
-import { Locale, useTranslations } from 'next-intl';
+import { Locale } from 'next-intl';
 import { getTranslations } from 'next-intl/server';
 
 export async function generateMetadata({

src/components/shared/mdx-component.tsx

@@ -139,27 +139,46 @@ const components = {
   pre: ({
     className,
     __rawString__,
+    children,
     ...props
-  }: React.HTMLAttributes<HTMLPreElement> & { __rawString__?: string }) => (
-    <div className="my-4 group relative w-full overflow-hidden">
-      <pre
-        className={cn(
-          "max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-900 py-4 dark:bg-zinc-900",
-          className,
-        )}
-        {...props}
-      />
-      {__rawString__ && (
-        <CopyButton
-          value={__rawString__}
+  }: React.HTMLAttributes<HTMLPreElement> & { __rawString__?: string }) => {
+    const preRef = React.useRef<HTMLPreElement>(null);
+    const [codeContent, setCodeContent] = React.useState<string>(__rawString__ || '');
+    
+    // Extract the text content from the pre element after rendering
+    React.useEffect(() => {
+      if (preRef.current && !codeContent) {
+        // Find the code element inside the pre element
+        const codeElement = preRef.current.querySelector('code');
+        if (codeElement) {
+          // Get the text content of the code element
+          const text = codeElement.textContent || '';
+          setCodeContent(text);
+        }
+      }
+    }, [codeContent]);
+    
+    return (
+      <div className="my-4 group relative w-full overflow-hidden">
+        <pre
+          ref={preRef}
           className={cn(
-            "absolute right-4 top-4 z-20",
-            "duration-250 opacity-0 transition-all group-hover:opacity-100",
+            "max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-900 py-4 dark:bg-zinc-900",
+            className,
           )}
-        />
-      )}
-    </div>
-  ),
+          {...props}
+        >
+          {children}
+        </pre>
+        {(codeContent || __rawString__) && (
+          <CopyButton
+            value={codeContent || __rawString__ || ''}
+            className="absolute right-4 top-4 z-20 opacity-70 hover:opacity-100 transition-all"
+          />
+        )}
+      </div>
+    );
+  },
   code: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
     <code
       className={cn(