feat: add modal to disable magic dns

app/routes/_data.dns._index/rename.tsx

@@ -1,7 +1,12 @@
 import { Dialog } from '@headlessui/react'
+import { Form } from '@remix-run/react'
 import { useState } from 'react'
 
-export default function Modal() {
+type Properties = {
+	readonly name: string;
+}
+
+export default function Modal({ name }: Properties) {
 	const [isOpen, setIsOpen] = useState(false)
 
 	return (
@@ -22,29 +27,29 @@ export default function Modal() {
 				}}
 			>
 				<div className='fixed inset-0 bg-black/30' aria-hidden='true'/>
-				<div className='fixed inset-0 flex w-screen items-center justify-center p-4'>
+				<div className='fixed inset-0 flex w-screen items-center justify-center'>
 					<Dialog.Panel className='bg-white rounded-lg p-4 w-full max-w-md'>
-						<Dialog.Title>
+						<Dialog.Title className='text-lg font-bold'>
-							Rename Tailnet
+							Rename {name}
 						</Dialog.Title>
-						<Dialog.Description>
+						<Dialog.Description className='text-gray-500 dark:text-gray-400'>
-							<p>
+							Keep in mind that changing this can lead to all sorts
-								Enter a new name for your Tailnet.
+							of unexpected behavior and may break existing devices
-							</p>
+							in your tailnet.
 						</Dialog.Description>
-						<div className='flex gap-4'>
+						<Form method='PATCH'>
 							<input
 								type='text'
-								className='border rounded-lg p-2 w-full'
+								className='border rounded-lg p-2 w-full mt-4'
-								placeholder='New name'
+								placeholder={name}
 							/>
 							<button
 								type='button'
-								className='rounded-lg px-3 py-2 bg-gray-800 text-white w-fit text-sm'
+								className='rounded-lg py-2 bg-gray-800 text-white w-full mt-2'
 							>
 								Rename
 							</button>
-						</div>
+						</Form>
 					</Dialog.Panel>
 				</div>
 			</Dialog>

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

@@ -5,6 +5,7 @@ import { useState } from 'react'
 
 import { getConfig } from '~/utils/config'
 
+import MagicModal from './magic'
 import RenameModal from './rename'
 
 // We do not want to expose every config value
@@ -51,7 +52,7 @@ export default function Page() {
 						event.target.select()
 					}}
 				/>
-				<RenameModal/>
+				<RenameModal name={data.baseDomain}/>
 			</div>
 			<div className='flex flex-col w-2/3'>
 				<h1 className='text-2xl font-medium mb-4'>Nameservers</h1>
@@ -59,7 +60,7 @@ export default function Page() {
 					Set the nameservers used by devices on the Tailnet
 					to resolve DNS queries.
 				</p>
-				<div className='my-8'>
+				<div className='mt-4'>
 					<div className='flex items-center justify-between mb-2'>
 						<h2 className='text-md font-medium opacity-80'>
 							Global Nameservers
@@ -106,8 +107,62 @@ export default function Page() {
 							</div>
 						))}
 					</div>
+					{/* TODO: Split DNS and Custom A Records */}
 				</div>
 			</div>
+
+			<div className='flex flex-col w-2/3'>
+				<h1 className='text-2xl font-medium mb-4'>Search Domains</h1>
+				<p className='text-gray-700 dark:text-gray-300'>
+					Set custom DNS search domains for your Tailnet.
+					When using Magic DNS, your tailnet domain is used as the first search domain.
+				</p>
+				<div className='border border-gray-200 rounded-lg bg-gray-50'>
+					{data.magicDns ? (
+						<div
+							key='magic-dns-sd'
+							className={clsx(
+								'flex items-center justify-between px-3 py-2',
+								'border-b border-gray-200 last:border-b-0'
+							)}
+						>
+							<p className='font-mono text-sm'>{data.baseDomain}</p>
+						</div>
+					) : undefined}
+					{data.searchDomains.map((sd, index) => (
+						<div
+							// eslint-disable-next-line react/no-array-index-key
+							key={index}
+							className={clsx(
+								'flex items-center justify-between px-3 py-2',
+								'border-b border-gray-200 last:border-b-0'
+							)}
+						>
+							<p className='font-mono text-sm'>{sd}</p>
+							<button
+								type='button'
+								className='text-sm text-red-700'
+							>
+								Remove
+							</button>
+						</div>
+					))}
+				</div>
+			</div>
+			<div className='flex flex-col w-2/3'>
+				<h1 className='text-2xl font-medium mb-4'>Magic DNS</h1>
+				<p className='text-gray-700 dark:text-gray-300 mb-4'>
+					Automaticall register domain names for each device
+					on the tailnet. Devices will be accessible at
+					{' '}
+					<code className='bg-gray-100 p-1 rounded-md'>
+						[device].[user].{data.baseDomain}
+					</code>
+					{' '}
+					when Magic DNS is enabled.
+				</p>
+				<MagicModal isEnabled={data.magicDns} baseDomain={data.baseDomain}/>
+			</div>
 		</div>
 	)
 }