MUI Reuse Dialog

./src/components/NoticeDialog/NoticeDialog.tsx

import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Skeleton, Typography } from "@mui/material";
export type NoticeDialogType = {open: boolean, title: string, content: string}
export function NoticeDialog(props: NoticeDialogType & {close: Function}) {
  return (
    <Dialog
        open={props.open||false}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
        fullWidth
      >
      <DialogTitle id="alert-dialog-title">
        {props.title}
      </DialogTitle>
      <DialogContent>
        <DialogContentText id="alert-dialog-description">
          {props.content}
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={()=>props.close()}>Close</Button>
      </DialogActions>
    </Dialog>
  )
}

./src/examples/NoticeDialogExample.tsx

import { Button } from "@mui/material"
import { Box } from "@mui/system"
import { useState } from "react"
import { NoticeDialog, NoticeDialogType } from "../../components/NoticeDialog/NoticeDialog" // STEP 1

export default function NoticeDialogExample() {
  const [dialog, setDialog] = useState<NoticeDialogType>() // STEP 2

  // STEP 3
  function openDialog(content: string, title='' ) {
    setDialog({open: true, content, title})
  }

  return (
    <Box className='flex items-center justify-center h-screen'>

      {/* Usage */}
      <Button onClick={()=>openDialog('Dialog content, title can be empty', 'Title')}>Show Dilog</Button>

      {/* STEP 4 */}
      <NoticeDialog title={dialog?.title||''} content={dialog?.content||''} open={dialog?.open||false} close={()=>{
        if (dialog?.open) {
          setDialog({...dialog, open: false})
        }
      }} />
    </Box>
  )
}