chore: combine link usage

app/routes/settings/auth-keys/dialogs/add-auth-key.tsx

@@ -5,7 +5,7 @@ import Button from "~/components/Button";
 import Code from "~/components/Code";
 import Dialog from "~/components/Dialog";
 import Input from "~/components/Input";
-import Link from "~/components/Link";
+import Link from "~/components/link";
 import NumberInput from "~/components/NumberInput";
 import Select from "~/components/Select";
 import Switch from "~/components/Switch";
@@ -204,6 +204,7 @@ export default function AddAuthKey({
                 Devices authenticated with this key will be automatically removed once they go
                 offline.{" "}
                 <Link
+                  isExternal
                   name="Tailscale Ephemeral Nodes Documentation"
                   to="https://tailscale.com/kb/1111/ephemeral-nodes"
                 >

app/routes/settings/auth-keys/overview.tsx

@@ -1,9 +1,8 @@
 import { FileKey2 } from "lucide-react";
 import { useMemo, useState } from "react";
-import { Link as RemixLink } from "react-router";
 
 import Code from "~/components/Code";
-import Link from "~/components/Link";
+import Link from "~/components/link";
 import Notice from "~/components/Notice";
 import Select from "~/components/Select";
 import TableList from "~/components/TableList";
@@ -167,9 +166,9 @@ export default function Page({
   return (
     <div className="flex flex-col md:w-2/3">
       <p className="text-md mb-8">
-        <RemixLink className="font-medium" to="/settings">
+        <Link className="font-medium" to="/settings">
           Settings
-        </RemixLink>
+        </Link>
         <span className="mx-2">/</span> Pre-Auth Keys
       </p>
       {!access ? (
@@ -194,6 +193,7 @@ export default function Page({
         Headscale fully supports pre-authentication keys in order to easily add devices to your
         Tailnet. To learn more about using pre-authentication keys, visit the{" "}
         <Link
+          isExternal
           name="Tailscale Auth Keys documentation"
           to="https://tailscale.com/kb/1085/auth-keys/"
         >

app/routes/settings/overview.tsx

@@ -1,7 +1,6 @@
 import { ArrowRight } from "lucide-react";
-import { Link as RemixLink } from "react-router";
 
-import Link from "~/components/Link";
+import Link from "~/components/link";
 
 import type { Route } from "./+types/overview";
 
@@ -30,6 +29,7 @@ export default function Page({ loaderData: { config, isOidcEnabled } }: Route.Co
           Headscale fully supports pre-authentication keys in order to easily add devices to your
           Tailnet. To learn more about using pre-authentication keys, visit the{" "}
           <Link
+            isExternal
             name="Tailscale Auth Keys documentation"
             to="https://tailscale.com/kb/1085/auth-keys/"
           >
@@ -37,12 +37,12 @@ export default function Page({ loaderData: { config, isOidcEnabled } }: Route.Co
           </Link>
         </p>
       </div>
-      <RemixLink to="/settings/auth-keys">
+      <Link to="/settings/auth-keys">
         <div className="flex items-center text-lg font-medium">
           Manage Auth Keys
           <ArrowRight className="ml-2 h-5 w-5" />
         </div>
-      </RemixLink>
+      </Link>
       {config && isOidcEnabled ? (
         <>
           <div className="flex w-full flex-col sm:w-2/3">
@@ -53,6 +53,7 @@ export default function Page({ loaderData: { config, isOidcEnabled } }: Route.Co
               Tailnet to only certain users or groups and Headplane will also respect these settings
               when authenticating.{" "}
               <Link
+                isExternal
                 name="Headscale OIDC documentation"
                 to="https://headscale.net/stable/ref/oidc/#basic-configuration"
               >
@@ -60,12 +61,12 @@ export default function Page({ loaderData: { config, isOidcEnabled } }: Route.Co
               </Link>
             </p>
           </div>
-          <RemixLink to="/settings/restrictions">
+          <Link to="/settings/restrictions">
             <div className="flex items-center text-lg font-medium">
               Manage Restrictions
               <ArrowRight className="ml-2 h-5 w-5" />
             </div>
-          </RemixLink>
+          </Link>
         </>
       ) : undefined}
     </div>

app/routes/settings/restrictions/overview.tsx

@@ -1,6 +1,6 @@
-import { data, Link as RemixLink } from "react-router";
+import { data } from "react-router";
 
-import Link from "~/components/Link";
+import Link from "~/components/link";
 import Notice from "~/components/Notice";
 import { Capabilities } from "~/server/web/roles";
 
@@ -46,9 +46,9 @@ export default function Page({ loaderData: { access, writable, settings } }: Rou
     <div className="flex max-w-(--breakpoint-lg) flex-col gap-4">
       <div className="flex w-full flex-col sm:w-2/3">
         <p className="text-md mb-4">
-          <RemixLink className="font-medium" to="/settings">
+          <Link className="font-medium" to="/settings">
             Settings
-          </RemixLink>
+          </Link>
           <span className="mx-2">/</span> Authentication Restrictions
         </p>
         {!access ? (
@@ -70,6 +70,7 @@ export default function Page({ loaderData: { access, writable, settings } }: Rou
           certain users or groups and Headplane will also respect these settings when
           authenticating.{" "}
           <Link
+            isExternal
             name="Headscale OIDC documentation"
             to="https://headscale.net/stable/ref/oidc/#basic-configuration"
           >