fix: blog link component

components/blog/link.tsx

@@ -0,0 +1,27 @@
+'use client';
+import { cn } from '@/lib/utils';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+
+function Link({
+  children,
+  ...props
+}: PropsWithChildren<HTMLAttributes<HTMLAnchorElement>> & {
+  children: React.ReactNode;
+}) {
+  return (
+    <span
+      onClick={() => {
+        if ('href' in props) {
+          const href = props.href as string;
+          window.open(href, '_blank');
+        }
+      }}
+      className={cn('decoration-muted cursor-pointer text-black underline opacity-70 hover:opacity-100')}
+      rel='noopener noreferrer'
+    >
+      {children}
+    </span>
+  );
+}
+
+export default Link;

components/blog/mdx-render.tsx

@@ -1,12 +1,13 @@
 import CodeBlock from '@/components/blog/code-block';
 import InlineCodeTag from '@/components/blog/inline-code';
+import Link from '@/components/blog/link';
 import Quote from '@/components/blog/quote';
 import Caption from '@/components/blog/caption';
 import Video from '@/components/blog/video';
 import { cn } from '@/lib/utils';
 import { MDXRemote } from 'next-mdx-remote/rsc';
 import Image, { ImageProps } from './mdx-image';
-import { HTMLAttributes, PropsWithChildren } from 'react';
+import { HTMLAttributes } from 'react';
 import Admonition from './admonition';
 import Heading, { HeadingProps } from './heading';
 import MDXTable from './mdx-table';
@@ -55,20 +56,7 @@ const components = {
     />
   ),
   Video,
-  a: (props: PropsWithChildren<HTMLAttributes<HTMLAnchorElement>>) => {
-    const { children, ...rest } = props;
-
-    return (
-      <a
-        {...rest}
-        className={cn('decoration-muted text-black opacity-70 hover:opacity-100')}
-        target='_blank'
-        rel='noopener noreferrer'
-      >
-        {children}
-      </a>
-    );
-  },
+  a: Link,
 };
 
 const MyMDXRender: React.FC<MyMDXComponentProps> = ({ source }) => {