Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | 20x 20x 20x 20x 20x 952x 874x 821x 496x 989x | import CloseIcon from "@mui/icons-material/Close";
import {
Dialog as MuiDialog,
DialogActions as MuiDialogActions,
DialogActionsProps,
DialogContent as MuiDialogContent,
DialogContentProps,
DialogContentText as MuiDialogContentText,
DialogContentTextProps,
DialogProps,
DialogTitle as MuiDialogTitle,
DialogTitleProps as MuiDialogTitleProps,
} from "@mui/material";
import IconButton from "components/IconButton";
import React from "react";
import { theme } from "theme";
export interface AccessibleDialogProps extends Omit<DialogProps, "className"> {
"aria-labelledby": string;
}
export function Dialog(props: AccessibleDialogProps) {
return <MuiDialog {...props} fullWidth maxWidth="sm" scroll="body" />;
}
export function DialogActions(props: Omit<DialogActionsProps, "className">) {
return (
<MuiDialogActions
{...props}
sx={{
display: "flex",
justifyContent: "center",
margin: 0,
padding: theme.spacing(2),
paddingTop: 0,
}}
/>
);
}
export function DialogContent(props: Omit<DialogContentProps, "className">) {
return (
<MuiDialogContent
{...props}
sx={{
height: "fit-content",
padding: theme.spacing(3),
paddingTop: 0,
width: "100%",
}}
/>
);
}
export function DialogContentText(props: DialogContentTextProps) {
return <MuiDialogContentText {...props} sx={{ padding: theme.spacing(2) }} />;
}
interface DialogTitleProps extends Omit<MuiDialogTitleProps, "className"> {
onClose?: () => void;
}
export function DialogTitle({
children,
onClose,
...dialogTitleProps
}: DialogTitleProps) {
return (
<MuiDialogTitle
{...dialogTitleProps}
sx={{
"&": theme.typography.h2,
padding: theme.spacing(2),
textAlign: "center",
}}
>
{onClose && (
<IconButton
aria-label="close"
onClick={onClose}
size="large"
sx={{
position: "absolute",
right: theme.spacing(1),
top: theme.spacing(1),
color: theme.palette.grey[500],
}}
>
<CloseIcon />
</IconButton>
)}
{children}
</MuiDialogTitle>
);
}
|