feat(TALE-35): implement pre-auth key management

app/routes/_data.settings._index/route.tsx

@@ -0,0 +1,39 @@
+import Link from '~/components/Link'
+import Button from '~/components/Button'
+import { Link as RemixLink } from '@remix-run/react'
+import { ArrowRightIcon } from '@primer/octicons-react'
+import { cn } from '~/utils/cn'
+
+export default function Page() {
+	return (
+		<div className="flex flex-col gap-8 max-w-screen-lg">
+			<div className='flex flex-col w-2/3'>
+				<h1 className='text-2xl font-medium mb-4'>Pre-Auth Keys</h1>
+				<p className="text-gray-700 dark:text-gray-300">
+					Headscale fully supports pre-authentication keys in order to
+					easily add devices to your Tailnet.
+					To learn more about using pre-authentication keys, visit the
+					{' '}
+					<Link
+						to="https://tailscale.com/kb/1085/auth-keys/"
+						name="Tailscale Auth Keys documentation"
+					>
+						Tailscale documentation
+					</Link>
+				</p>
+			</div>
+			<RemixLink
+				to="/settings/auth-keys"
+				name="Auth Keys"
+			>
+				<span className={cn(
+					'text-lg font-medium',
+					'text-gray-700 dark:text-gray-300',
+				)}>
+					Manage Auth Keys
+					<ArrowRightIcon className="w-5 h-5 ml-2" />
+				</span>
+			</RemixLink>
+		</div>
+	)
+}