feat(ui): create custom <a/> component

src/app/(blog)/post/[slug]/components/anchor.tsx

@@ -0,0 +1,19 @@
+import { AnchorHTMLAttributes, DetailedHTMLProps, ReactNode } from 'react'
+
+import { ArrowSquareOut } from '@/shared/lib/phosphor-icons'
+
+interface Props
+  extends DetailedHTMLProps<
+    AnchorHTMLAttributes<HTMLAnchorElement>,
+    HTMLAnchorElement
+  > {
+  children: ReactNode
+}
+
+export function Anchor({ children, href, ...props }: Props) {
+  return (
+    <a className="inline-flex items-center gap-1" href={href} {...props}>
+      {children} <ArrowSquareOut />
+    </a>
+  )
+}

src/app/(blog)/post/[slug]/page.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import type { Metadata } from 'next'
+import type { MDXComponents } from 'mdx/types'
 import Link from 'next/link'
 import { useMDXComponent } from 'next-contentlayer/hooks'
 import { FiTag } from 'react-icons/fi'
@@ -11,6 +12,7 @@ import { Folder } from '@/shared/lib/phosphor-icons'
 import { Date } from '@/shared/components/date'
 import { CalendarBlank, Clock } from '@/shared/components/icons'
 import { TopButton } from './components/top-button'
+import { Anchor } from './components/anchor'
 
 interface Props {
   params: { slug: string }
@@ -30,6 +32,17 @@ export function generateMetadata({ params }: Props): Metadata {
   }
 }
 
+const mdxComponents: MDXComponents = {
+  a: ({ children, href, ...props }) =>
+    href?.startsWith('http') ? (
+      <Anchor href={href} {...props}>
+        {children}
+      </Anchor>
+    ) : (
+      <a href={href}>{children}</a>
+    )
+}
+
 export default function Page({ params }: Props) {
   const post = allPosts.find(post => post.id === params.slug) as Post
 
@@ -97,7 +110,7 @@ export default function Page({ params }: Props) {
         </div>
       </div>
       <div className="post-content">
-        <MDXContent />
+        <MDXContent components={mdxComponents} />
       </div>
       <TopButton />
     </div>