chore: add link to headscale acl faq on acl page

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>
+	)
+}

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
+				<Link
-					target='_blank'
+					to='https://tailscale.com/kb/1018/acls'
-					rel='noreferrer'
+					name='Tailscale ACL documentation'
-					href='https://tailscale.com/kb/1018/acls'
-					className='text-blue-500 dark:text-blue-400 hover:underline'
 				>
-					More information
+					Tailscale ACL guide
-				</a>
+				</Link>
+				{' '}
+				and the
+				{' '}
+				<Link
+					to='https://headscale.net/acls'
+					name='Headscale ACL documentation'
+				>
+					Headscale docs
+				</Link>
+				.
 			</p>
 
 			<Tabs>