mirror of
https://gitlab.aliens-lyon.fr/encartes/web-interface.git
synced 2026-03-17 22:51:04 +01:00
About dialog
This commit is contained in:
parent
8c13fd68fc
commit
02584c6a82
41
src/App.js
41
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 <>
|
||||
@ -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 />
|
||||
</>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user