Function DeleteModal

apps/web/ui/ConfigurationsView/RemoveCommunity/index.tsx:70–126

({
  open,
  setOpen,
  communityName,
  setCommunityName,
  currentCommunity,
  onRemoveConfirm,
}: {
  open: boolean;
  setOpen(prop: boolean): void;
  communityName?: string;
  setCommunityName(prop?: string): void;
  currentCommunity: SerializedAccount;
  onRemoveConfirm: () => Promise<void>;
})

}

function DeleteModal({
  open,
  setOpen,
  communityName,
  setCommunityName,
  currentCommunity,
  onRemoveConfirm,
}: {
  open: boolean;
  setOpen(prop: boolean): void;
  communityName?: string;
  setCommunityName(prop?: string): void;
  currentCommunity: SerializedAccount;
  onRemoveConfirm: () => Promise<void>;
}) {
  return (
    <Modal open={open} close={() => setOpen(false)} size="md">
      <div className={styles.modalFlexColumnGap4}>
        <div className={styles.modalTitle}>
          <H3>Remove Community</H3>

          <div className={styles.modalCloseBtn} onClick={() => setOpen(false)}>
            <span className="sr-only">Close</span>
            <FiX />
          </div>
        </div>
        <div className={styles.modalDescription}>
          <p>
            Once you delete a community, there is no going back. Please be
            certain.
          </p>
        </div>
        <TextInput
          autoFocus
          id="communityName"
          label="Please type your community path to confirm deletion"
          value={communityName}
          required
          onChange={(e) => setCommunityName(e.target.value)}
        />
        <Button
          onClick={() => {
            onRemoveConfirm();
          }}
          disabled={communityName !== currentCommunity.slackDomain}
          color={
            communityName !== currentCommunity.slackDomain
              ? 'disabled'
              : 'danger'
          }
        >
          Delete this community
        </Button>
      </div>
    </Modal>
  );
}