headplane/app/routes/machines/dialogs/delete.tsx

import { useNavigate } from 'react-router';
import Dialog from '~/components/Dialog';
import type { Machine } from '~/types';

interface DeleteProps {
	machine: Machine;
	isOpen: boolean;
	setIsOpen: (isOpen: boolean) => void;
}

export default function Delete({ machine, isOpen, setIsOpen }: DeleteProps) {
	const navigate = useNavigate();

	return (
		<Dialog isOpen={isOpen} onOpenChange={setIsOpen}>
			<Dialog.Panel
				onSubmit={() => navigate('/machines')}
				variant="destructive"
			>
				<Dialog.Title>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>
				<input name="action_id" type="hidden" value="delete" />
				<input name="node_id" type="hidden" value={machine.id} />
			</Dialog.Panel>
		</Dialog>
	);
}