From 9023d94d8d76de3587eeb819047f49aea62a4279 Mon Sep 17 00:00:00 2001
From: Aamir Azad <aamirmazad@gmail.com>
Date: Sun, 30 Jun 2024 20:56:13 +0530
Subject: [PATCH] fix: standardize link formatting

---
 src/app/page.tsx                              |  8 +++---
 src/app/paperless/page.tsx                    | 11 ++++----
 src/app/sign-in/page.tsx                      | 10 +++----
 src/components/document-viewer.tsx            |  5 +++-
 ...link-in-new-page.tsx => external-link.tsx} |  8 ++++--
 src/components/internal-link.tsx              | 26 +++++++++++++++++++
 6 files changed, 50 insertions(+), 18 deletions(-)
 rename src/components/{open-link-in-new-page.tsx => external-link.tsx} (69%)
 create mode 100644 src/components/internal-link.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5039f3a..d524e8c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,4 @@
-import OpenLinkInNewPage from "@/components/open-link-in-new-page";
+import OpenExternalLInk from "@/components/external-link";
 
 export default function HomePage() {
   return (
@@ -6,10 +6,10 @@ export default function HomePage() {
       <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>
diff --git a/src/app/paperless/page.tsx b/src/app/paperless/page.tsx
index d81d96e..fa68ac5 100644
--- a/src/app/paperless/page.tsx
+++ b/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>
diff --git a/src/app/sign-in/page.tsx b/src/app/sign-in/page.tsx
index 97752f3..8acb668 100644
--- a/src/app/sign-in/page.tsx
+++ b/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>
diff --git a/src/components/document-viewer.tsx b/src/components/document-viewer.tsx
index a8200bf..49a9356 100644
--- a/src/components/document-viewer.tsx
+++ b/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>
diff --git a/src/components/open-link-in-new-page.tsx b/src/components/external-link.tsx
similarity index 69%
rename from src/components/open-link-in-new-page.tsx
rename to src/components/external-link.tsx
index b5d7b4d..0a9664c 100644
--- a/src/components/open-link-in-new-page.tsx
+++ b/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}
diff --git a/src/components/internal-link.tsx b/src/components/internal-link.tsx
new file mode 100644
index 0000000..19cc0e9
--- /dev/null
+++ b/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>
+  );
+}