refactor: replace custom external link icon with Lucide ArrowUpRightIcon

src/components/icons/external-link.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-
-/**
- * External link icon
- */
-export function ExternalLinkIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      width="6"
-      height="6"
-      viewBox="0 0 6 6"
-      {...props}
-    >
-      <path
-        fill="currentColor"
-        d="M1.252 5.547l-.63-.63 3.16-3.161H1.383L1.39.891h3.887v3.89h-.87l.005-2.396-3.159 3.162z"
-      />
-    </svg>
-  );
-}

src/components/icons/icons.tsx

@@ -59,7 +59,6 @@ import { StripeIcon } from "./stripe";
 import { TailwindcssIcon } from "./tailwindcss";
 import { VercelIcon } from "./vercel";
 import { YouTubeIcon } from "./youtube";
-import { ExternalLinkIcon } from "./external-link";
 import { TikTokIcon } from "./tiktok";
 import { LinkedInIcon } from "./linkedin";
 import { InstagramIcon } from "./instagram";
@@ -126,7 +125,6 @@ export const Icons = {
 
   admin: LockKeyholeIcon,
   about: Building2Icon,
-  externalLink: ExternalLinkIcon,
 
   github: GitHubIcon,
   google: GoogleIcon,

src/components/layout/navbar.tsx

@@ -109,8 +109,6 @@ export function Navbar({ scroll = false, config }: NavBarProps) {
                 </Button>
               </LoginWrapper>
             )}
-
-            {/* <ModeToggle /> */}
           </div>
         </Container>
       </header>
@@ -184,8 +182,6 @@ export function Navbar({ scroll = false, config }: NavBarProps) {
                 </Button>
               </LoginWrapper>
             )}
-
-            {/* <ModeToggle /> */}
           </div>
         </div>
       </header>

src/components/marketing/navbar-mobile.tsx

@@ -12,13 +12,12 @@ import { siteConfig } from '@/config/site';
 import { Routes } from '@/routes';
 import { cn } from '@/lib/utils';
 import { Portal } from '@radix-ui/react-portal';
-import { ChevronDown, ChevronUp, MenuIcon, X } from 'lucide-react';
+import { ArrowUpRightIcon, ChevronDown, ChevronUp, MenuIcon, X } from 'lucide-react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import * as React from 'react';
 import { RemoveScroll } from 'react-remove-scroll';
 import { ThemeSwitcherHorizontal } from '@/components/layout/theme-switcher-horizontal';
-import { ExternalLinkIcon } from '../icons/external-link';
 
 export function NavbarMobile({
   className,
@@ -202,7 +201,7 @@ function MainMobileMenu({ onLinkClicked }: MainMobileMenuProps) {
                               )}
                             </div>
                             {subItem.external && (
-                              <ExternalLinkIcon className="size-4 shrink-0 text-muted-foreground transition-colors group-hover:text-foreground" />
+                              <ArrowUpRightIcon className="size-4 shrink-0 text-muted-foreground transition-colors group-hover:text-foreground" />
                             )}
                           </Link>
                         </li>

src/components/marketing/navbar.tsx

@@ -25,7 +25,7 @@ import { Routes } from '@/routes';
 import { MarketingConfig } from '@/types';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { ExternalLinkIcon } from '../icons/external-link';
+import { ArrowUpRightIcon } from 'lucide-react';
 
 interface NavBarProps {
   scroll?: boolean;
@@ -105,7 +105,7 @@ export function Navbar({ scroll, config }: NavBarProps) {
                                     )}
                                   </div>
                                   {subItem.external && (
-                                    <ExternalLinkIcon className="size-4 shrink-0 text-muted-foreground transition-colors group-hover:text-foreground" />
+                                    <ArrowUpRightIcon className="size-4 shrink-0 text-muted-foreground transition-colors group-hover:text-foreground" />
                                   )}
                                 </Link>
                               </NavigationMenuLink>