From 3c01bc6a2043f6601e531375b2e1ac94d755c90e Mon Sep 17 00:00:00 2001
From: Aamir Azad <aamirmazad@gmail.com>
Date: Fri, 14 Jun 2024 15:43:27 +0530
Subject: [PATCH] feat: seperate external link to its own component

---
 src/app/page.tsx                         | 14 +++-----------
 src/components/open-link-in-new-page.tsx | 24 ++++++++++++++++++++++++
 2 files changed, 27 insertions(+), 11 deletions(-)
 create mode 100644 src/components/open-link-in-new-page.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 73cef78..7102175 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,22 +1,14 @@
+import OpenLinkInNewPage from "@/components/open-link-in-new-page";
 import { ExternalLink } from "lucide-react";
 
 export default async function HomePage() {
-
   return (
     <main className="">
       <div className="">
         <div>Welcome to Homelab Connector</div>
         <div>
-          Check out the{" "}
-          <a
-            rel="noopener noreferrer"
-            target="_blank"
-            className="text-blue-600 underline hover:text-blue-800"
-            href="https://github.com/aamirazad/homelab-connector/blob/main/README.md"
-          >
-            README
-            <ExternalLink size={16} className="mx-1 inline-block" />
-          </a>
+          Check out the
+          <OpenLinkInNewPage href="https://github.com/aamirazad/homelab-connector/blob/main/README.md">README</OpenLinkInNewPage>
           to get started.
         </div>
         <div>Or sign in to access the dashboard.</div>
diff --git a/src/components/open-link-in-new-page.tsx b/src/components/open-link-in-new-page.tsx
new file mode 100644
index 0000000..b5d7b4d
--- /dev/null
+++ b/src/components/open-link-in-new-page.tsx
@@ -0,0 +1,24 @@
+import { ExternalLink } from "lucide-react";
+import React from "react";
+
+interface OpenLinkInNewPageProps {
+  children: React.ReactNode;
+  href: string;
+}
+
+export default function OpenLinkInNewPage({
+  children,
+  href,
+}: OpenLinkInNewPageProps) {
+  return (
+    <a
+      rel="noopener noreferrer"
+      target="_blank"
+      className="mx-1 text-blue-600 underline hover:text-blue-800"
+      href={href}
+    >
+      {children}
+      <ExternalLink size={16} className="ml-1 inline-block" />
+    </a>
+  );
+}