About dialog

This commit is contained in:
Adrien Vannson 2022-10-05 15:22:02 +02:00
parent 8c13fd68fc
commit 02584c6a82
No known key found for this signature in database
GPG Key ID: FE2E66FD978C1A55

View File

@ -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 <>
@ -13,7 +19,7 @@ function RoomResearch() {
<Typography component="h2" variant="h5" gutterBottom>
Rechercher une salle
</Typography>
<TextField id="outlined-basic" label="Nom, code, occupants, ..." variant="outlined" fullWidth/>
<TextField id="outlined-basic" label="Nom, code, occupants, ..." variant="outlined" fullWidth />
<Box
marginTop={1}
display="flex"
@ -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,16 +52,35 @@ 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>
</>
}
export default function App() {
return <>
<TopBar/>
<TopBar />
<RoomResearch />
</>