About dialog

src/App.js

@@ -6,6 +6,12 @@ import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
 import TextField from '@mui/material/TextField';
 import Container from '@mui/material/Container';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+
 
 function RoomResearch() {
   return <>
@@ -27,6 +33,16 @@ function RoomResearch() {
 }
 
 function TopBar() {
+  const [openAboutModal, setOpenAboutModal] = React.useState(false);
+
+  const handleOpenAboutModal = () => {
+    setOpenAboutModal(true);
+  };
+
+  const handleCloseAboutModal = () => {
+    setOpenAboutModal(false);
+  };
+
   return <>
     <Box sx={{ flexGrow: 1 }}>
       <AppBar position="static">
@@ -36,10 +52,29 @@ function TopBar() {
           </Typography>
           <Button color="inherit">Choix d'une carte</Button>
           <Button color="inherit">Recherche d'une salle</Button>
-          <Button color="inherit">À propos</Button>
+          <Button color="inherit" onClick={handleOpenAboutModal}>À propos</Button>
         </Toolbar>
       </AppBar>
     </Box>
+
+    <Dialog
+      open={openAboutModal}
+      onClose={handleCloseAboutModal}
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+    >
+      <DialogTitle id="alert-dialog-title">
+        {"À propos d'ENcarteS"}
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText id="alert-dialog-description">
+          ENcarteS permet de rechercher les salles de l'ENS !
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleCloseAboutModal}>Ok</Button>
+      </DialogActions>
+    </Dialog>
   </>
 }