Material design interface

src/App.js

@@ -1,25 +1,52 @@
-import logo from './logo.svg';
-import './App.css';
+import * as React from 'react';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Container from '@mui/material/Container';
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+function RoomResearch() {
+  return <>
+    <Container maxWidth="sm">
+      <Typography component="h2" variant="h5" gutterBottom>
+        Rechercher une salle
+      </Typography>
+      <TextField id="outlined-basic" label="Nom, code, occupants, ..." variant="outlined" fullWidth/>
+      <Box
+        marginTop={1}
+        display="flex"
+        justifyContent="flex-end"
+        alignItems="flex-end"
+      >
+        <Button variant="contained">Rechercher</Button>
+      </Box>
+    </Container>
+  </>
 }
 
-export default App;
+function TopBar() {
+  return <>
+    <Box sx={{ flexGrow: 1 }}>
+      <AppBar position="static">
+        <Toolbar>
+          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+            ENcarteS
+          </Typography>
+          <Button color="inherit">Choix d'une carte</Button>
+          <Button color="inherit">Recherche d'une salle</Button>
+          <Button color="inherit">À propos</Button>
+        </Toolbar>
+      </AppBar>
+    </Box>
+  </>
+}
+
+export default function App() {
+  return <>
+    <TopBar/>
+
+    <RoomResearch />
+  </>
+}