Pincode Input Dialog with Area Suggestions and Close Icon

client/src/components/SimpleDialog.jsx

@@ -1,31 +1,30 @@
 import Button from '@mui/material/Button';
 import DialogTitle from '@mui/material/DialogTitle';
 import Dialog from '@mui/material/Dialog';
-import { Input } from '@mui/material';
-import { useState,useEffect } from 'react';
+import { Input, IconButton } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { useState, useEffect } from 'react';
 
 function SimpleDialog(props) {
     const { onClose, open } = props;
     const [pincode, setPincode] = useState('');
     const [suggestions, setSuggestions] = useState([]);
-  
+
     const handleClose = () => {
-      if(pincode.length === 6 && localStorage.getItem('userArea')){
-      onClose();
-      }
-      else
-      {
+      if (pincode.length === 6 && localStorage.getItem('userArea')) {
+        onClose();
+      } else {
         alert("Please enter a valid pincode & select an area from the list.");
       }
     };
-  
+
     useEffect(() => {
       const fetchSuggestions = async () => {
         try {
           if (pincode.length === 6) {
             const response = await fetch(`https://api.postalpincode.in/pincode/${pincode}`);
             const data = await response.json();
-  
+
             if (data[0]?.Status === 'Success') {
               const areaSuggestions = data[0]?.PostOffice?.map((office) => office.Name) || [];
               setSuggestions(areaSuggestions);
@@ -40,23 +39,37 @@ function SimpleDialog(props) {
           setSuggestions([]);
         }
       };
-  
+
       fetchSuggestions();
     }, [pincode]);
-  
+
     const handleListItemClick = (value) => {
       onClose(value);
     };
-  
+
     const handleInputChange = (e) => {
       setPincode(e.target.value);
     };
-  
+
     return (
       <>
         <Dialog onClose={handleClose} open={open}>
-          <DialogTitle>Enter your Pincode</DialogTitle>
-          <div className=" p-6">
+          <DialogTitle>
+            Enter your Pincode
+            <IconButton
+              aria-label="close"
+              onClick={onClose}
+              sx={{
+                position: 'absolute',
+                right: 8,
+                top: 8,
+                color: (theme) => theme.palette.grey[500],
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+          </DialogTitle>
+          <div className="p-6">
             <form
               action="/"
               onSubmit={(e) => {
@@ -73,34 +86,35 @@ function SimpleDialog(props) {
                 onChange={handleInputChange}
                 className="mb-3"
               />
-
-
-
+
               <Button variant="contained" color="primary" type="submit">
                 Submit
               </Button>
             </form>
-  
+
             <div>
-                <ul className="absolute z-50 p-1 bg-white w-10/12 shadow-lg">
-                  {suggestions.map((suggestion, index) => (
-                    <>
-                      <button key={index} onClick={(e)=>{
+              <ul className="absolute z-50 p-1 bg-white w-10/12 shadow-lg">
+                {suggestions.map((suggestion, index) => (
+                  <>
+                    <button
+                      key={index}
+                      onClick={() => {
                         localStorage.setItem('userArea', suggestion);
                         localStorage.setItem('userPincode', pincode);
                         setSuggestions([]);
-                      }}>
-                        {suggestion}
-                      </button>
+                      }}
+                    >
+                      {suggestion}
+                    </button>
                     <br />
-                    </>
-                  ))}
-                </ul>
-              </div>
+                  </>
+                ))}
+              </ul>
+            </div>
           </div>
         </Dialog>
       </>
     );
-  }
+}
 
-export default SimpleDialog;
+export default SimpleDialog;