chore: combine link usage

app/components/Footer.tsx

@@ -1,6 +1,6 @@
 import { CircleX } from "lucide-react";
 
-import Link from "~/components/Link";
+import Link from "~/components/link";
 import cn from "~/utils/cn";
 
 interface FooterProps {
@@ -28,7 +28,7 @@ export default function Footer({ url, debug, healthy }: FooterProps) {
         <div className={cn("text-xs leading-none", !healthy && "hidden md:block")}>
           <p>
             Headplane is free. Please consider{" "}
-            <Link to="https://github.com/sponsors/tale" name="Aarnav's GitHub Sponsors">
+            <Link isExternal to="https://github.com/sponsors/tale" name="Aarnav's GitHub Sponsors">
               donating
             </Link>{" "}
             to support development.{" "}

app/components/Link.tsx

@@ -1,32 +0,0 @@
-import { ExternalLink } from "lucide-react";
-
-import cn from "~/utils/cn";
-
-export interface LinkProps {
-  to: string;
-  name: string;
-  children: string;
-  className?: string;
-}
-
-export default function Link({ to, name: alt, children, className }: LinkProps) {
-  return (
-    <a
-      href={to}
-      aria-label={alt}
-      target="_blank"
-      rel="noreferrer"
-      className={cn(
-        "inline-flex items-center gap-x-0.5",
-        "text-blue-500 hover:text-blue-700",
-        "dark:text-blue-400 dark:hover:text-blue-300",
-        "focus:outline-hidden focus:ring-2 focus:ring-indigo-500/40 focus:ring-offset-1 rounded-md",
-        "dark:focus:ring-indigo-400/40 dark:focus:ring-offset-mist-900",
-        className,
-      )}
-    >
-      {children}
-      <ExternalLink className="w-3.5" />
-    </a>
-  );
-}

app/components/error-banner.tsx

@@ -6,7 +6,7 @@ import cn from "~/utils/cn";
 
 import Card from "./Card";
 import Code from "./Code";
-import Link from "./Link";
+import Link from "./link";
 
 export function getErrorMessage(error: Error | unknown): {
   title: string;
@@ -137,7 +137,7 @@ export function getErrorMessage(error: Error | unknown): {
           <Card.Text>
             An unexpected error occurred which is most likely a bug. Please consider reporting
             filing an issue on the{" "}
-            <Link name="Headplane GitHub" to="https://github.com/tale/headplane/issues">
+            <Link isExternal name="Headplane GitHub" to="https://github.com/tale/headplane/issues">
               Headplane GitHub
             </Link>{" "}
             repository with the details below.

app/components/link.tsx

@@ -0,0 +1,52 @@
+import { ExternalLink } from "lucide-react";
+import type { JSX } from "react";
+import { Link as RouterLink } from "react-router";
+
+import cn from "~/utils/cn";
+
+const linkStyles = cn(
+  "inline-flex items-center gap-x-0.5",
+  "text-blue-500 hover:text-blue-700",
+  "dark:text-blue-400 dark:hover:text-blue-300",
+  "focus:ring-offset-1 rounded-md",
+  "focus:outline-hidden focus:ring-2 focus:ring-indigo-500/40",
+  "dark:focus:ring-indigo-400/40 dark:focus:ring-offset-mist-900",
+);
+
+export type LinkProps =
+  | {
+      isExternal: true;
+      to: string;
+      name: string;
+      children: string;
+      className?: string;
+    }
+  | {
+      isExternal?: false;
+      to: string;
+      children?: string;
+      className?: string;
+    };
+
+export default function Link(props: LinkProps): JSX.Element {
+  if (props.isExternal) {
+    return (
+      <a
+        href={props.to}
+        aria-label={props.name}
+        target="_blank"
+        rel="noreferrer"
+        className={cn(linkStyles, props.className)}
+      >
+        {props.children}
+        <ExternalLink className="w-3.5" />
+      </a>
+    );
+  }
+
+  return (
+    <RouterLink to={props.to} className={cn(linkStyles, props.className)}>
+      {props.children}
+    </RouterLink>
+  );
+}