feat: experimental support for draggable domains

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

@@ -6,6 +6,7 @@ import { useState } from 'react'
 
 import { getConfig, patchConfig } from '~/utils/config'
 
+import Domains from './domains'
 import MagicModal from './magic'
 import RenameModal from './rename'
 
@@ -28,6 +29,7 @@ export async function loader() {
 
 export async function action({ request }: ActionFunctionArgs) {
 	const data = await request.json() as Record<string, unknown>
+	console.log(data)
 	await patchConfig(data)
 	return json({ success: true })
 }
@@ -163,44 +165,11 @@ export default function Page() {
 				</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>
+			<Domains
+				baseDomain={data.magicDns ? data.baseDomain : undefined}
+				searchDomains={data.searchDomains}
+			/>
+
 			<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'>