From 7f55ad826c6d0c372a11e78cb6b388e2f541c685 Mon Sep 17 00:00:00 2001
From: Aarnav Tale <aarnavtale@icloud.com>
Date: Sat, 4 May 2024 15:04:55 -0400
Subject: [PATCH] chore: add link to headscale acl faq on acl page

---
 app/components/Link.tsx                | 31 ++++++++++++++++++++++++++
 app/routes/_data.acls._index/route.tsx | 24 +++++++++++++-------
 2 files changed, 47 insertions(+), 8 deletions(-)
 create mode 100644 app/components/Link.tsx

diff --git a/app/components/Link.tsx b/app/components/Link.tsx
new file mode 100644
index 0000000..c9f37ee
--- /dev/null
+++ b/app/components/Link.tsx
@@ -0,0 +1,31 @@
+import { LinkExternalIcon } from '@primer/octicons-react'
+
+import { cn } from '~/utils/cn'
+
+/* eslint-disable unicorn/no-keyword-prefix */
+type Properties = {
+	readonly to: string;
+	readonly name: string;
+	readonly children: string;
+	readonly className?: string;
+}
+
+export default function Link({ to, name: alt, children, className }: Properties) {
+	return (
+		<a
+			href={to}
+			aria-label={alt}
+			target='_blank'
+			rel='noreferrer'
+			className={cn(
+				'inline-flex items-center gap-x-1',
+				'text-blue-500 hover:text-blue-700',
+				'dark:text-blue-400 dark:hover:text-blue-300',
+				className
+			)}
+		>
+			{children}
+			<LinkExternalIcon className='h-3 w-3'/>
+		</a>
+	)
+}
diff --git a/app/routes/_data.acls._index/route.tsx b/app/routes/_data.acls._index/route.tsx
index bc19a6e..9ac0bfc 100644
--- a/app/routes/_data.acls._index/route.tsx
+++ b/app/routes/_data.acls._index/route.tsx
@@ -75,16 +75,24 @@ export default function Page() {
 
 			<p className='mb-4 max-w-prose'>
 				The ACL file is used to define the access control rules for your network.
-				You can find more information about the ACL file in the Tailscale documentation.
+				You can find more information about the ACL file in the
 				{' '}
-				<a
-					target='_blank'
-					rel='noreferrer'
-					href='https://tailscale.com/kb/1018/acls'
-					className='text-blue-500 dark:text-blue-400 hover:underline'
+				<Link
+					to='https://tailscale.com/kb/1018/acls'
+					name='Tailscale ACL documentation'
 				>
-					More information
-				</a>
+					Tailscale ACL guide
+				</Link>
+				{' '}
+				and the
+				{' '}
+				<Link
+					to='https://headscale.net/acls'
+					name='Headscale ACL documentation'
+				>
+					Headscale docs
+				</Link>
+				.
 			</p>
 
 			<Tabs>