Fixed external link icon

components/ui/ExternalLink.tsx

@@ -1,3 +1,4 @@
+import { ExternalLinkIcon } from 'lucide-react'
 import type { AnchorHTMLAttributes } from 'react'
 
 type ExternalLinkProps = Omit<
@@ -7,6 +8,11 @@ type ExternalLinkProps = Omit<
   href: string
 }
 
-export function ExternalLink(props: ExternalLinkProps) {
+export function ExternalLink({ children, ...props }: ExternalLinkProps) {
-  return <a {...props} target="_blank" rel="noopener noreferrer" />
+  return (
+    <a {...props} target="_blank" rel="noopener noreferrer">
+      {children}
+      <ExternalLinkIcon className="inline-block w-3 h-3 ml-1 mb-2" />
+    </a>
+  )
 }

lib/posts.tsx

@@ -26,7 +26,6 @@ import { rehypeDefinition } from '@/lib/rehype-definition'
 import { slugify } from '@/utils/slug'
 import { PostMeta } from '@/types/Post.type'
 import Link from 'next/link'
-import { ExternalLinkIcon } from 'lucide-react'
 
 const postsDirectory = path.join(process.cwd(), 'content/posts')
 
@@ -102,7 +101,6 @@ export async function getPostBySlug(slug: string, postDirectory: string = postsD
         href?.startsWith('http') ? (
           <ExternalLink href={href}>
             {children}
-            <ExternalLinkIcon className="inline-block w-3 h-3 ml-1" />
           </ExternalLink>
         ) : (
           <Link href={href}>{children}</Link>