blob: ce3db43ce9319e450e41aebe31ea07d284ab8f7f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
import { Link } from 'react-router-dom';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
function Bar() {
const pages = [
{ name: 'Schedule', to: '/schedule'},
{ name: 'RSVP', to: '/rsvp' },
{ name: 'Registry', to: '/registry' }
];
return (
<AppBar position="relative">
<Toolbar>
<Typography
variant="h4"
component={Link}
to="/"
color="inherit"
sx={{ textDecoration: 'none' }}
>
Wedding
</Typography>
<Box sx={{ marginLeft: 'auto' }}>
{pages.map((page) => (
<Button component={Link} to={page.to} key={page.name} color="inherit">
{page.name}
</Button>
))}
</Box>
</Toolbar>
</AppBar>
);
}
export default Bar;
|