add support for icon in dialog box

src/components/DialogBox/DialogIcon.tsx

@@ -0,0 +1,18 @@
+import { Box } from '@mui/material';
+import React from 'react';
+
+export default function DialogIcon({ icon }: { icon: React.ReactNode }) {
+    return (
+        <Box
+            className="DialogIcon"
+            sx={{
+                svg: {
+                    width: '48px',
+                    height: '48px',
+                },
+                color: 'stroke.secondary',
+            }}>
+            {icon}
+        </Box>
+    );
+}

src/components/DialogBox/base.tsx

@@ -5,6 +5,12 @@ const DialogBoxBase = styled(Dialog)(({ theme }) => ({
         padding: theme.spacing(1, 1.5),
         maxWidth: '346px',
     },
+
+    '& .DialogIcon': {
+        padding: theme.spacing(2),
+        paddingBottom: theme.spacing(1),
+    },
+
     '& .MuiDialogTitle-root': {
         padding: theme.spacing(2),
         paddingBottom: theme.spacing(1),
@@ -12,6 +18,11 @@ const DialogBoxBase = styled(Dialog)(({ theme }) => ({
     '& .MuiDialogContent-root': {
         padding: theme.spacing(2),
     },
+
+    '.DialogIcon + .MuiDialogTitle-root': {
+        paddingTop: 0,
+    },
+
     '.MuiDialogTitle-root + .MuiDialogContent-root': {
         paddingTop: 0,
     },

src/components/DialogBox/index.tsx

@@ -13,6 +13,7 @@ import DialogTitleWithCloseButton, {
 } from './TitleWithCloseButton';
 import DialogBoxBase from './base';
 import { DialogBoxAttributes } from 'types/dialogBox';
+import DialogIcon from './DialogIcon';
 
 type IProps = React.PropsWithChildren<
     Omit<DialogProps, 'onClose' | 'maxSize'> & {
@@ -48,6 +49,7 @@ export default function DialogBox({
             maxWidth={size}
             onClose={handleClose}
             {...props}>
+            {attributes.icon && <DialogIcon icon={attributes.icon} />}
             {attributes.title && (
                 <DialogTitleWithCloseButton
                     onClose={

src/types/dialogBox/index.ts

@@ -1,6 +1,7 @@
 import { ButtonProps } from '@mui/material';
 
 export interface DialogBoxAttributes {
+    icon?: React.ReactNode;
     title?: string;
     staticBackdrop?: boolean;
     nonClosable?: boolean;