feat: add external link support in navigation components

Author: danieldanielecki

components/Header.tsx

@@ -9,6 +9,7 @@ import SearchButton from './SearchButton'
 import { useTheme } from 'next-themes'
 import Image from 'next/image'
 import { useEffect, useState } from 'react'
+import { ExternalLink } from './social-icons/icons'
 
 const Header = () => {
   const { resolvedTheme } = useTheme()
@@ -58,9 +59,12 @@ const Header = () => {
               <Link
                 key={link.title}
                 href={link.href}
-                className="hover:text-primary-500 dark:hover:text-primary-400 m-1 font-medium text-gray-900 dark:text-gray-100"
+                className="hover:text-primary-500 dark:hover:text-primary-400 m-1 font-medium text-gray-900 dark:text-gray-100 flex items-center gap-1"
               >
                 {link.title}
+                {link.external && (
+                  <ExternalLink className="h-3 w-3 text-gray-500 dark:text-gray-400" />
+                )}
               </Link>
             ))}
         </div>

components/Link.tsx

@@ -3,9 +3,10 @@ import Link from 'next/link'
 import type { LinkProps } from 'next/link'
 import { AnchorHTMLAttributes } from 'react'
 
-const CustomLink = ({ href, ...rest }: LinkProps & AnchorHTMLAttributes<HTMLAnchorElement>) => {
+const CustomLink = ({ href, external, ...rest }: LinkProps & AnchorHTMLAttributes<HTMLAnchorElement> & { external?: boolean }) => {
   const isInternalLink = href && href.startsWith('/')
   const isAnchorLink = href && href.startsWith('#')
+  const isExternalLink = external || (href && (href.startsWith('http://') || href.startsWith('https://')))
 
   if (isInternalLink) {
     return <Link className="break-words" href={href} {...rest} />

components/MobileNav.tsx

@@ -5,6 +5,7 @@ import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'bo
 import { Fragment, useState, useEffect, useRef } from 'react'
 import Link from './Link'
 import headerNavLinks from '@/data/headerNavLinks'
+import { ExternalLink } from './social-icons/icons'
 
 const MobileNav = () => {
   const [navShow, setNavShow] = useState(false)
@@ -76,10 +77,13 @@ const MobileNav = () => {
                   <Link
                     key={link.title}
                     href={link.href}
-                    className="hover:text-primary-500 dark:hover:text-primary-400 mb-4 py-2 pr-4 text-2xl font-bold tracking-widest text-gray-900 outline outline-0 dark:text-gray-100"
+                    className="hover:text-primary-500 dark:hover:text-primary-400 mb-4 py-2 pr-4 text-2xl font-bold tracking-widest text-gray-900 outline outline-0 dark:text-gray-100 flex items-center gap-2"
                     onClick={onToggleNav}
                   >
                     {link.title}
+                    {link.external && (
+                      <ExternalLink className="h-4 w-4 text-gray-500 dark:text-gray-400" />
+                    )}
                   </Link>
                 ))}
               </nav>

components/social-icons/icons.tsx

@@ -94,6 +94,15 @@ export function Instagram(svgProps: SVGProps<SVGSVGElement>) {
   )
 }
 
+export function ExternalLink(svgProps: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...svgProps}>
+      <title>External Link</title>
+      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3" />
+    </svg>
+  )
+}
+
 export function Medium(svgProps: SVGProps<SVGSVGElement>) {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...svgProps}>

components/social-icons/index.tsx

@@ -11,6 +11,7 @@ import {
   Instagram,
   Medium,
   Bluesky,
+  ExternalLink,
 } from './icons'
 
 const components = {
@@ -26,6 +27,7 @@ const components = {
   instagram: Instagram,
   medium: Medium,
   bluesky: Bluesky,
+  externalLink: ExternalLink,
 }
 
 type SocialIconProps = {

data/headerNavLinks.ts

@@ -1,7 +1,7 @@
 const headerNavLinks = [
   { href: '/', title: 'Home' },
   { href: '/blog', title: 'Blog' },
-  { href: '/about', title: 'About' },
+  // { href: '/about', title: 'About' },
   { href: '/tags', title: 'Tags' },
   { href: 'https://education.ditectrev.com', title: 'Education', external: true },
   { href: 'https://apps.apple.com/app/cloudmaster-swift/id6503601139', title: 'iOS App', external: true },