feat: add functional machine overview page and fix types

app/routes/_data.machines._index/dialogs/delete.tsx

@@ -1,54 +1,62 @@
-import { type FetcherWithComponents } from '@remix-run/react'
+import { Form, useSubmit } from '@remix-run/react'
 import { type Dispatch, type SetStateAction } from 'react'
 
 import Dialog from '~/components/Dialog'
 import { type Machine } from '~/types'
 import { cn } from '~/utils/cn'
 
-type DeleteProperties = {
-	readonly machine: Machine;
-	readonly fetcher: FetcherWithComponents<unknown>;
-	readonly state: [boolean, Dispatch<SetStateAction<boolean>>];
+interface DeleteProps {
+	readonly machine: Machine
+	readonly state: [boolean, Dispatch<SetStateAction<boolean>>]
 }
 
-export default function Delete({ machine, fetcher, state }: DeleteProperties) {
+export default function Delete({ machine, state }: DeleteProps) {
+	const submit = useSubmit()
+
 	return (
 		<Dialog>
 			<Dialog.Panel control={state}>
 				{close => (
 					<>
 						<Dialog.Title>
-							Remove {machine.givenName}
+							Remove
+							{' '}
+							{machine.givenName}
 						</Dialog.Title>
 						<Dialog.Text>
 							This machine will be permanently removed from
 							your network. To re-add it, you will need to
 							reauthenticate to your tailnet from the device.
 						</Dialog.Text>
-						<fetcher.Form method='POST'>
-							<input type='hidden' name='_method' value='delete'/>
-							<input type='hidden' name='id' value={machine.id}/>
-							<div className='mt-6 flex justify-end gap-2 mt-6'>
+						<Form
+							method="POST"
+							onSubmit={(e) => {
+								submit(e.currentTarget)
+							}}
+						>
+							<input type="hidden" name="_method" value="delete" />
+							<input type="hidden" name="id" value={machine.id} />
+							<div className="mt-6 flex justify-end gap-2 mt-6">
 								<Dialog.Action
-									variant='cancel'
+									variant="cancel"
 									onPress={close}
 								>
 									Cancel
 								</Dialog.Action>
 								<Dialog.Action
-									variant='confirm'
+									variant="confirm"
 									className={cn(
 										'bg-red-500 hover:border-red-700',
 										'dark:bg-red-600 dark:hover:border-red-700',
 										'pressed:bg-red-600 hover:bg-red-600',
-										'text-white dark:text-white'
+										'text-white dark:text-white',
 									)}
 									onPress={close}
 								>
 									Remove
 								</Dialog.Action>
 							</div>
-						</fetcher.Form>
+						</Form>
 					</>
 				)}
 			</Dialog.Panel>