Fouad
e5f41731ae
* bootstrap next app + add overview page * fix AssetList type * fix up nav stuff * Refactor Nav component and add network components pages * Refactor WorldMap component and update TelegramIcon, GitHubIcon, NymVpnIcon, DiscordIcon, and TwitterIcon components * add service providers page * mixnodes page * delegations page + use material react table for all tables * nodes map page * Refactor StyledLink component and remove unnecessary console.log statements * Refactor ESLint configuration, remove unused dependencies, and update component imports * update deps * Refactor imports and update dependencies * fix dark mode * build single mixnode page * build single gateway page * Refactor handleOnDelegate function to use useCallback in mixnodes page.tsx * Add defaults for constants --------- Co-authored-by: Mark Sinclair <mmsinclair@users.noreply.github.com>
84 lines
1.9 KiB
TypeScript
84 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
Breakpoint,
|
|
Button,
|
|
Paper,
|
|
Dialog,
|
|
DialogActions,
|
|
DialogContent,
|
|
DialogTitle,
|
|
SxProps,
|
|
Typography,
|
|
} from '@mui/material';
|
|
|
|
export interface ConfirmationModalProps {
|
|
open: boolean;
|
|
onConfirm: () => void;
|
|
onClose?: () => void;
|
|
children?: React.ReactNode;
|
|
title: React.ReactNode | string;
|
|
subTitle?: React.ReactNode | string;
|
|
confirmButton: React.ReactNode | string;
|
|
disabled?: boolean;
|
|
sx?: SxProps;
|
|
fullWidth?: boolean;
|
|
maxWidth?: Breakpoint;
|
|
backdropProps?: object;
|
|
}
|
|
|
|
export const ConfirmationModal = ({
|
|
open,
|
|
onConfirm,
|
|
onClose,
|
|
children,
|
|
title,
|
|
subTitle,
|
|
confirmButton,
|
|
disabled,
|
|
sx,
|
|
fullWidth,
|
|
maxWidth,
|
|
backdropProps,
|
|
}: ConfirmationModalProps) => {
|
|
const Title = (
|
|
<DialogTitle id="responsive-dialog-title" sx={{ pb: 2 }}>
|
|
{title}
|
|
{subTitle &&
|
|
(typeof subTitle === 'string' ? (
|
|
<Typography fontWeight={400} variant="subtitle1" fontSize={12} color="grey">
|
|
{subTitle}
|
|
</Typography>
|
|
) : (
|
|
subTitle
|
|
))}
|
|
</DialogTitle>
|
|
);
|
|
const ConfirmButton =
|
|
typeof confirmButton === 'string' ? (
|
|
<Button onClick={onConfirm} variant="contained" fullWidth disabled={disabled} sx={{ py: 1.6 }}>
|
|
<Typography variant="button" fontSize="large">
|
|
{confirmButton}
|
|
</Typography>
|
|
</Button>
|
|
) : (
|
|
confirmButton
|
|
);
|
|
return (
|
|
<Dialog
|
|
open={open}
|
|
onClose={onClose}
|
|
aria-labelledby="responsive-dialog-title"
|
|
maxWidth={maxWidth || 'sm'}
|
|
sx={{ textAlign: 'center', ...sx }}
|
|
fullWidth={fullWidth}
|
|
BackdropProps={backdropProps}
|
|
PaperComponent={Paper}
|
|
PaperProps={{ elevation: 0 }}
|
|
>
|
|
{Title}
|
|
<DialogContent>{children}</DialogContent>
|
|
<DialogActions sx={{ px: 3, pb: 3 }}>{ConfirmButton}</DialogActions>
|
|
</Dialog>
|
|
);
|
|
};
|