94 lines
1.8 KiB
TypeScript
94 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { FC } from "react";
|
|
import {
|
|
Box,
|
|
Dialog as InternalDialog,
|
|
DialogActions,
|
|
DialogContent,
|
|
DialogTitle,
|
|
} from "@mui/material";
|
|
import { typography, colors } from "../styles/theme";
|
|
|
|
type DialogDetailsProps = {
|
|
title: string;
|
|
children: React.ReactNode;
|
|
buttons?: React.ReactNode;
|
|
};
|
|
|
|
const DialogDetails: FC<DialogDetailsProps> = ({
|
|
title,
|
|
children,
|
|
buttons,
|
|
}) => {
|
|
const { h3 } = typography;
|
|
const { mediumGray, darkMediumGray } = colors;
|
|
|
|
return (
|
|
<>
|
|
<DialogTitle
|
|
sx={{
|
|
backgroundColor: mediumGray,
|
|
p: 3,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
...h3,
|
|
borderBottom: `1px solid ${darkMediumGray}`,
|
|
pb: 1.5,
|
|
}}
|
|
>
|
|
{title}
|
|
</Box>
|
|
</DialogTitle>
|
|
<DialogContent sx={{ backgroundColor: mediumGray, p: 3, pb: 4 }}>
|
|
{children}
|
|
</DialogContent>
|
|
{buttons && (
|
|
<DialogActions sx={{ backgroundColor: mediumGray, p: 3 }}>
|
|
{buttons}
|
|
</DialogActions>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
type DialogProps = {
|
|
title: string;
|
|
open: boolean;
|
|
onClose: Function;
|
|
formAction?: any;
|
|
buttons?: React.ReactNode;
|
|
children?: any;
|
|
};
|
|
|
|
export const Dialog: FC<DialogProps> = ({
|
|
title,
|
|
open,
|
|
onClose,
|
|
formAction,
|
|
buttons,
|
|
children,
|
|
}) => {
|
|
return (
|
|
<InternalDialog
|
|
open={open}
|
|
onClose={onClose as any}
|
|
fullWidth
|
|
maxWidth="md"
|
|
>
|
|
{formAction ? (
|
|
<form action={formAction}>
|
|
<DialogDetails title={title} buttons={buttons}>
|
|
{children}
|
|
</DialogDetails>
|
|
</form>
|
|
) : (
|
|
<DialogDetails title={title} buttons={buttons}>
|
|
{children}
|
|
</DialogDetails>
|
|
)}
|
|
</InternalDialog>
|
|
);
|
|
};
|