Typescript refactor.

src/app/(main)/settings/users/UserDeleteButton.tsx

@@ -0,0 +1,35 @@
+import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
+import useMessages from 'components/hooks/useMessages';
+import useUser from 'components/hooks/useUser';
+import UserDeleteForm from './UserDeleteForm';
+
+export function UserDeleteButton({
+  userId,
+  username,
+  onDelete,
+}: {
+  userId: string;
+  username: string;
+  onDelete?: () => void;
+}) {
+  const { formatMessage, labels } = useMessages();
+  const { user } = useUser();
+
+  return (
+    <ModalTrigger disabled={userId === user?.id}>
+      <Button disabled={userId === user?.id}>
+        <Icon>
+          <Icons.Trash />
+        </Icon>
+        <Text>{formatMessage(labels.delete)}</Text>
+      </Button>
+      <Modal title={formatMessage(labels.deleteUser)}>
+        {close => (
+          <UserDeleteForm userId={userId} username={username} onSave={onDelete} onClose={close} />
+        )}
+      </Modal>
+    </ModalTrigger>
+  );
+}
+
+export default UserDeleteButton;