Using a dialog for confirm delete alert.

src/components/dialog/Dialog.tsx

@@ -1,4 +1,4 @@
-import { Component, JSXElement } from 'solid-js';
+import { Component, JSXElement, Show } from 'solid-js';
 import {
   Dialog as MuiDialog,
   DialogContent,
@@ -10,7 +10,8 @@ import CloseIcon from '@suid/icons-material/Close';
 const Dialog: Component<{
   open: boolean;
   fullScreen?: boolean;
-  title: JSXElement;
+  maxWidth?: boolean;
+  title?: JSXElement;
   closeHandler: (event: any, reason?: string) => void;
   children: JSXElement;
 }> = (props) => {
@@ -21,24 +22,27 @@ const Dialog: Component<{
       PaperProps={{ sx: { minWidth: '300px' } }}
       fullScreen={props.fullScreen}
     >
-      <DialogTitle
-        sx={{
-          backgroundColor: 'rgba(14, 116, 144, 0.7)',
-          color: 'white',
-          clear: 'both',
-          margin: '0',
-          paddingLeft: '0',
-        }}
-      >
-        <IconButton onClick={props.closeHandler}>
-          <CloseIcon />
-        </IconButton>
-        {props.title}
-      </DialogTitle>
+      <Show when={props.title}>
+        <DialogTitle
+          sx={{
+            backgroundColor: 'rgba(14, 116, 144, 0.7)',
+            color: 'white',
+            clear: 'both',
+            margin: '0',
+            paddingLeft: '0',
+          }}
+        >
+          <IconButton onClick={props.closeHandler}>
+            <CloseIcon />
+          </IconButton>
+          {props.title}
+        </DialogTitle>
+      </Show>
       <DialogContent
         sx={{
           width: 'calc(100% - 60px)',
-          paddingBottom: '2000px',
+          paddingBottom:
+            props.maxWidth === undefined || props.maxWidth ? '2000px' : '2px',
         }}
       >
         {props.children}