Create reusable modal component

src/components/MUI/DialogComponent.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+	Dialog,
+	DialogContent,
+	DialogTitle,
+	DialogActions,
+	Button,
+} from '@mui/material';
+
+const DialogComponent = ({ title, content, onClose, open }) => {
+	const handleClose = () => {
+		onClose();
+	};
+
+	return (
+		<Dialog onClose={handleClose} open={open}>
+			<DialogTitle>{title}</DialogTitle>
+			{content && <DialogContent>{content}</DialogContent>}
+			<DialogActions>
+				<Button onClick={handleClose}>OK</Button>
+				<Button onClick={handleClose}>Cancel</Button>
+			</DialogActions>
+		</Dialog>
+	);
+};
+
+DialogComponent.propTypes = {
+	title: PropTypes.string,
+	content: PropTypes.any,
+	onClose: PropTypes.func.isRequired,
+	open: PropTypes.bool.isRequired,
+	selectedValue: PropTypes.string.isRequired,
+};
+
+export default DialogComponent;

src/components/MUI/Navbar.js

@@ -24,82 +24,80 @@ const Navbar = () => {
 	};
 
 	return (
-		<>
-			<AppBar elevation={2} sx={{ backgroundColor: 'background.default' }}>
-				<Toolbar>
+		<AppBar elevation={2} sx={{ backgroundColor: 'background.default', position: 'relative' }}>
+			<Toolbar>
+				<Box
+					component='div'
+					sx={{
+						display: 'flex',
+						justifyContent: 'space-between',
+						alignItems: 'center',
+						width: '100%',
+					}}
+				>
+					{matches ? (
+						<Drawer open={openDrawer} toggleOpen={handleToggleDrawer} />
+					) : (
+						<Box sx={{ display: 'flex' }}>
+							<Typography
+								variant='h6'
+								sx={{
+									marginRight: 3,
+									cursor: 'pointer',
+									color: 'text.primary',
+								}}
+							>
+								Link 1
+							</Typography>
+							<Typography
+								variant='body1'
+								sx={{
+									marginRight: 3,
+									cursor: 'pointer',
+									color: 'text.primary',
+								}}
+							>
+								Link 2
+							</Typography>
+							<Typography
+								variant='subtitle1'
+								sx={{
+									marginRight: 3,
+									cursor: 'pointer',
+									color: 'text.primary',
+								}}
+							>
+								Link 3
+							</Typography>
+						</Box>
+					)}
+					<Box>
+						<MenuList />
+					</Box>
 					<Box
-						component="div"
 						sx={{
 							display: 'flex',
-							justifyContent: 'space-between',
+							justifyContent: 'center',
 							alignItems: 'center',
-							width: '100%',
 						}}
 					>
 						{matches ? (
-							<Drawer open={openDrawer} toggleOpen={handleToggleDrawer} />
-						) : (
-							<Box sx={{ display: 'flex' }}>
-								<Typography
-									variant="h6"
-									sx={{
-										marginRight: 3,
-										cursor: 'pointer',
-										color: 'text.primary',
-									}}
-								>
-									Link 1
-								</Typography>
-								<Typography
-									variant="body1"
-									sx={{
-										marginRight: 3,
-										cursor: 'pointer',
-										color: 'text.primary',
-									}}
-								>
-									Link 2
-								</Typography>
-								<Typography
-									variant="subtitle1"
-									sx={{
-										marginRight: 3,
-										cursor: 'pointer',
-										color: 'text.primary',
-									}}
-								>
-									Link 3
-								</Typography>
+							<Box>
+								<IconButton onClick={handleToggleDrawer}>
+									<MenuOutlinedIcon />
+								</IconButton>
 							</Box>
+						) : (
+							<IconButton>
+								<Badge badgeContent={3} color='primary'>
+									<ShoppingBasketIcon color='action' />
+								</Badge>
+							</IconButton>
 						)}
-						<Box>
-							<MenuList />
-						</Box>
-						<Box
-							sx={{
-								display: 'flex',
-								justifyContent: 'center',
-								alignItems: 'center',
-							}}
-						>
-							{matches ? (
-								<Box>
-									<IconButton onClick={handleToggleDrawer}>
-										<MenuOutlinedIcon />
-									</IconButton>
-								</Box>
-							) : (
-								<IconButton>
-									<Badge badgeContent={3} color="primary">
-										<ShoppingBasketIcon color="action" />
-									</Badge>
-								</IconButton>
-							)}
-						</Box>
 					</Box>
-				</Toolbar>
-			</AppBar>
-		</>
+				</Box>
+			</Toolbar>
+		</AppBar>
 	);
 };
 

src/pages/HomePage/HomePageMUI.js

@@ -1,10 +1,25 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Box, Button, Typography } from '@mui/material';
+import DialogComponent from '../../components/MUI/DialogComponent';
 import Navbar from '../../components/MUI/Navbar';
 
 const HomePage = () => {
+	const [dialogOpen, setDialogOpen] = useState(false);
+
 	return (
-        <Navbar />
-    )
+		<>
+			<Navbar />
+			<Box component="div">
+                <Button onClick={() => setDialogOpen(true)}>Open Dialog</Button>
+                <DialogComponent
+                    title="Dialog Title"
+                    content={<Typography>Dialog Content</Typography>}
+                    open={dialogOpen}
+                    onClose={() => setDialogOpen(false)}
+                />
+			</Box>
+		</>
+	);
 };
 
 export default HomePage;