mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-01-20 08:39:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat: create generic dialog component

Browse Source
This commit is contained in:
Caio Cabral
2024-10-22 05:58:21 -04:00
parent 7184d57588
commit effc6dac3a
2 changed files with 86 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
Client/src/Components/Dialog/genericDialog.jsx Normal file
View File

@@ -0,0 +1,45 @@
import { Modal, Stack } from "@mui/material";
import PropTypes from "prop-types";
const GenericDialog = ({ title, description, open, onClose, theme, children }) => {
return (
<Modal
aria-labelledby={title}
aria-describedby={description}
open={open}
onClose={onClose}
>
<Stack
gap={theme.spacing(2)}
sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 400,
bgcolor: theme.palette.background.main,
border: 1,
borderColor: theme.palette.border.light,
borderRadius: theme.shape.borderRadius,
boxShadow: 24,
p: theme.spacing(15),
"&:focus": {
outline: "none",
},
}}
>
{children}
</Stack>
</Modal>
);
};
GenericDialog.propTypes = {
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
open: PropTypes.bool.isRequired,
onClose: PropTypes.func.isRequired,
theme: PropTypes.object.isRequired,
children: PropTypes.element.isRequired,
};
export { GenericDialog };

100
Client/src/Components/Dialog/index.jsx
View File

@@ -1,6 +1,7 @@
import LoadingButton from "@mui/lab/LoadingButton";
import { Button, Modal, Stack, Typography } from "@mui/material";
import { Button, Stack, Typography } from "@mui/material";
import PropTypes from "prop-types";
import { GenericDialog } from "./genericDialog";
const Dialog = ({
modelTitle,
modelDescription,
@@ -16,72 +17,53 @@ const Dialog = ({
description,
}) => {
return (
<Modal
aria-labelledby={modelTitle}
aria-describedby={modelDescription}
<GenericDialog
title={modelTitle}
description={modelDescription}
open={open}
onClose={onClose}
close={onClose}
theme={theme}
>
<Stack
gap={theme.spacing(2)}
sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 400,
bgcolor: theme.palette.background.main,
border: 1,
borderColor: theme.palette.border.light,
borderRadius: theme.shape.borderRadius,
boxShadow: 24,
p: theme.spacing(15),
"&:focus": {
outline: "none",
},
}}
<Typography
id={modelTitle}
component="h2"
fontSize={16}
color={theme.palette.text.primary}
fontWeight={600}
>
{title}
</Typography>
{description && (
<Typography
id={modelTitle}
component="h2"
fontSize={16}
color={theme.palette.text.primary}
fontWeight={600}
id={modelDescription}
color={theme.palette.text.tertiary}
>
{title}
{description}
</Typography>
{description && (
<Typography
id={modelDescription}
color={theme.palette.text.tertiary}
>
{description}
</Typography>
)}
<Stack
direction="row"
gap={theme.spacing(4)}
mt={theme.spacing(12)}
justifyContent="flex-end"
)}
<Stack
direction="row"
gap={theme.spacing(4)}
mt={theme.spacing(12)}
justifyContent="flex-end"
>
<Button
variant="text"
color="info"
onClick={cancelBtnOnClick}
>
<Button
variant="text"
color="info"
onClick={cancelBtnOnClick}
>
{cancelBtnLbl}
</Button>
<LoadingButton
variant="contained"
color="error"
loading={isLoading}
onClick={confirmationBtnOnClick}
>
{confirmationBtnLbl}
</LoadingButton>
</Stack>
{cancelBtnLbl}
</Button>
<LoadingButton
variant="contained"
color="error"
loading={isLoading}
onClick={confirmationBtnOnClick}
>
{confirmationBtnLbl}
</LoadingButton>
</Stack>
</Modal>
</GenericDialog>
);
};