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;