diff options
Diffstat (limited to 'src/components/NavBar.tsx')
-rw-r--r-- | src/components/NavBar.tsx | 53 |
1 files changed, 53 insertions, 0 deletions
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx new file mode 100644 index 0000000..c8cb136 --- /dev/null +++ b/src/components/NavBar.tsx @@ -0,0 +1,53 @@ +import { useContext, useMemo } from 'react'; +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 IconButton from '@mui/material/IconButton'; +import DarkModeIcon from '@mui/icons-material/DarkMode'; +import LightModeIcon from '@mui/icons-material/LightMode'; +import Stack from '@mui/material/Stack'; +import Toolbar from '@mui/material/Toolbar'; +import Typography from '@mui/material/Typography'; +import { useTheme } from '@mui/material/styles'; + +import { ThemeContext } from '../ThemeContextProvider'; + +function NavBar({ mode }) { + const theme = useTheme(); + const { switchColorMode } = useContext(ThemeContext); + + const pages = [ + { name: 'Schedule', to: '/schedule'}, + { name: 'RSVP', to: '/rsvp' }, + { name: 'Registry', to: '/registry' } + ]; + + return ( + <AppBar position="relative"> + <Toolbar> + <Typography + variant="h5" + component={Link} + to="/" + color="inherit" + sx={{ textDecoration: 'none' }} + > + Madison and Michael's Wedding + </Typography> + <Stack spacing={2} direction="row" sx={{ marginLeft: 'auto' }}> + {pages.map((page) => ( + <Button component={Link} to={page.to} key={page.name} variant="contained"> + {page.name} + </Button> + ))} + <IconButton variant="contained" color="inherit" onClick={switchColorMode}> + {theme.palette.mode === 'dark' ? <DarkModeIcon /> : <LightModeIcon />} + </IconButton> + </Stack> + </Toolbar> + </AppBar> + ); +} + +export default NavBar; |