fix: standardize link formatting

src/app/page.tsx

@@ -1,15 +1,15 @@
-import OpenLinkInNewPage from "@/components/open-link-in-new-page";
+import OpenExternalLInk from "@/components/external-link";
 
 export default function HomePage() {
   return (
     <main>
       <div>
         <div>Welcome to Homelab Connector</div>
         <div>
-          Check out the
-          <OpenLinkInNewPage href="https://github.com/aamirazad/homelab-connector/blob/main/README.md">
+          Check out the{" "}
+          <OpenExternalLInk href="https://github.com/aamirazad/homelab-connector/blob/main/README.md">
             README
-          </OpenLinkInNewPage>
+          </OpenExternalLInk>{" "}
           to get started.
         </div>
         <div>Or sign in to access the dashboard.</div>

src/app/paperless/page.tsx

@@ -24,6 +24,7 @@ import {
 import LoadingSpinner from "@/components/loading-spinner";
 import { getPaperlessDocuments, getUserData } from "@/app/actions";
 import Link from "next/link";
+import OpenInternalLink from "@/components/internal-link";
 
 const queryClient = new QueryClient();
 
@@ -115,15 +116,15 @@ function DocumentsPage() {
   } else if (!userData.data?.paperlessURL) {
     return (
       <h1 className="text-2xl font-bold">
-        You need to set your paperless url in{" "}
-        <Link href="/settings">settings</Link>
+        You need to set your paperless url in
+        <OpenInternalLink href="/settings">settings</OpenInternalLink>
       </h1>
     );
   } else if (!PaperlessDocuments.data || PaperlessDocuments.error) {
     return (
       <h1 className="text-2xl font-bold">
         Connection failed! Check that the paperless url/token is set correctly
-        in <Link href="/settings">settings</Link>
+        in <OpenInternalLink href="/settings">settings</OpenInternalLink>
       </h1>
     );
   }
@@ -158,8 +159,8 @@ export default function PaperlessPage() {
     <main className="">
       <div className="flex flex-col items-center justify-center">
         <SignedOut>
-          <div className="flex flex-col text-center text-2xl">
-            Please <Link href="/sign-in">sign in</Link>
+          <div className="text-center text-2xl">
+            Please <OpenInternalLink href="/sign-in">sign in</OpenInternalLink>
           </div>
         </SignedOut>
         <SignedIn>

src/app/sign-in/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import OpenInternalLink from "@/components/internal-link";
 import LoadingSpinner from "@/components/loading-spinner";
 import { RedirectToSignIn, SignedIn, SignedOut } from "@clerk/nextjs";
 import Link from "next/link";
@@ -18,13 +19,10 @@ export default function SignIn() {
       <SignedIn>
         You are already signed in
         <div className="mt-8">
-          Go
-          <Link
-            href="/"
-            className="ml-1 text-primary underline-offset-4 hover:underline"
-          >
+          Go{" "}
+          <OpenInternalLink href="/" className="text-primary">
             Home
-          </Link>
+          </OpenInternalLink>
         </div>
       </SignedIn>
     </main>

src/components/document-viewer.tsx

@@ -5,6 +5,7 @@ import { Button } from "./ui/button";
 import { useRouter } from "next/navigation";
 import { getUserData } from "@/app/actions";
 import type { AdviceAPIType } from "@/types";
+import OpenInternalLink from "./internal-link";
 
 export async function getPaperlessDocument(
   documentId: number,
@@ -149,7 +150,9 @@ export default function DocumentViewer(props: { id: number }) {
             >
               <p>
                 Your web browser doesn&apos;t have a PDF plugin. Instead you can
-                <a href={pdfUrl}>click here to download the PDF file.</a>
+                <OpenInternalLink href={pdfUrl}>
+                  click here to download the PDF file.
+                </OpenInternalLink>
               </p>
             </object>
           </div>

src/components/open-link-in-new-page.tsx → src/components/external-link.tsx

@@ -1,20 +1,24 @@
 import { ExternalLink } from "lucide-react";
 import React from "react";
 
+import { cn } from "@/lib/utils";
+
 interface OpenLinkInNewPageProps {
   children: React.ReactNode;
   href: string;
+  className?: string;
 }
 
-export default function OpenLinkInNewPage({
+export default function OpenExternalLInk({
   children,
   href,
+  className,
 }: OpenLinkInNewPageProps) {
   return (
     <a
       rel="noopener noreferrer"
       target="_blank"
-      className="mx-1 text-blue-600 underline hover:text-blue-800"
+      className={cn("text-sky-400 hover:underline", className)}
       href={href}
     >
       {children}

src/components/internal-link.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface OpenLinkInNewPageProps {
+  children: React.ReactNode;
+  href: string;
+  className?: string;
+}
+
+export default function OpenInternalLink({
+  children,
+  href,
+  className,
+}: OpenLinkInNewPageProps) {
+  return (
+    <a
+      rel="noopener noreferrer"
+      target="_blank"
+      className={cn("hover:underline", className)}
+      href={href}
+    >
+      {children}
+    </a>
+  );
+}