diff options
| -rw-r--r-- | package-lock.json | 26 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/App.tsx | 24 | ||||
| -rw-r--r-- | src/ThemeContextProvider.tsx | 44 | ||||
| -rw-r--r-- | src/components/Bar.tsx | 39 | ||||
| -rw-r--r-- | src/components/NavBar.tsx | 53 | ||||
| -rw-r--r-- | src/components/Rsvp.tsx | 1 | ||||
| -rw-r--r-- | src/components/Schedule.tsx | 48 | ||||
| -rw-r--r-- | src/main.tsx | 2 |
9 files changed, 159 insertions, 79 deletions
diff --git a/package-lock.json b/package-lock.json index bb7ec6b..7d50e2f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@fontsource/roboto": "^5.0.8", + "@mui/icons-material": "^5.15.10", "@mui/lab": "^5.0.0-alpha.165", "@mui/material": "^5.15.9", "react": "^18.2.0", @@ -1199,6 +1200,31 @@ "url": "https://opencollective.com/mui-org" } }, + "node_modules/@mui/icons-material": { + "version": "5.15.10", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.10.tgz", + "integrity": "sha512-9cF8oUHZKo9oQ7EQ3pxPELaZuZVmphskU4OI6NiJNDVN7zcuvrEsuWjYo1Zh4fLiC39Nrvm30h/B51rcUjvSGA==", + "dependencies": { + "@babel/runtime": "^7.23.9" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@mui/material": "^5.0.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@mui/lab": { "version": "5.0.0-alpha.165", "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.165.tgz", diff --git a/package.json b/package.json index 11541ee..14b10ec 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@fontsource/roboto": "^5.0.8", + "@mui/icons-material": "^5.15.10", "@mui/lab": "^5.0.0-alpha.165", "@mui/material": "^5.15.9", "react": "^18.2.0", diff --git a/src/App.tsx b/src/App.tsx index 156719f..deb7dec 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,35 +1,23 @@ -import React from 'react'; +import { createContext, useState, useMemo } from 'react'; import { Outlet, Route, Routes } from 'react-router-dom'; import useMediaQuery from '@mui/material/useMediaQuery'; import { createTheme, ThemeProvider } from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline'; -import Bar from './components/Bar'; +import NavBar from './components/NavBar'; import Home from './components/Home'; import Schedule from './components/Schedule'; import Registry from './components/Registry'; import Rsvp from './components/Rsvp'; - +import ThemeContextProvider from './ThemeContextProvider' function App() { - const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); - - const theme = React.useMemo( - () => - createTheme({ - palette: { - mode: prefersDarkMode ? 'dark' : 'light' - } - }), - [prefersDarkMode] - ); - return ( - <ThemeProvider theme={theme}> + <ThemeContextProvider> <CssBaseline /> - <Bar /> + <NavBar /> <Outlet /> - </ThemeProvider> + </ThemeContextProvider> ); } diff --git a/src/ThemeContextProvider.tsx b/src/ThemeContextProvider.tsx new file mode 100644 index 0000000..970f9d8 --- /dev/null +++ b/src/ThemeContextProvider.tsx @@ -0,0 +1,44 @@ +import { ReactNode, createContext, useMemo, useState } from 'react'; +import { StyledEngineProvider, ThemeProvider, createTheme } from '@mui/material/styles'; + +type ThemeContextType = { + switchColorMode: () => void; +}; + +type ThemeProviderProps = { + children: ReactNode; +}; + +export const ThemeContext = createContext<ThemeContextType>({ + switchColorMode: () => {} +}); + +function ThemeContextProvider({ children }: ThemeProviderProps) { + const [mode, setMode] = useState<'light' | 'dark'>('light'); + + const switchColorMode = () => { + setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light')); + }; + + const theme = useMemo( + () => + createTheme({ + palette: { + mode, + } + }), + [mode] + ); + + return ( + <StyledEngineProvider injectFirst> + <ThemeContext.Provider value={{ switchColorMode }}> + <ThemeProvider theme={theme}> + {children} + </ThemeProvider> + </ThemeContext.Provider> + </StyledEngineProvider> + ); +} + +export default ThemeContextProvider; diff --git a/src/components/Bar.tsx b/src/components/Bar.tsx deleted file mode 100644 index ce3db43..0000000 --- a/src/components/Bar.tsx +++ /dev/null @@ -1,39 +0,0 @@ -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; 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; diff --git a/src/components/Rsvp.tsx b/src/components/Rsvp.tsx index 881bf09..81f37fc 100644 --- a/src/components/Rsvp.tsx +++ b/src/components/Rsvp.tsx @@ -80,6 +80,7 @@ function Rsvp() { sx={{ maxWidth: 240 }} variant="contained"> Add Additional Guests + {/* TODO: only allow guests we've selected; allow kids? */} </Button> </Grid> {guestList} diff --git a/src/components/Schedule.tsx b/src/components/Schedule.tsx index 2fd0ab0..002907a 100644 --- a/src/components/Schedule.tsx +++ b/src/components/Schedule.tsx @@ -1,4 +1,5 @@ import Typography from '@mui/material/Typography'; +import Paper from '@mui/material/Paper'; import Timeline from '@mui/lab/Timeline'; import TimelineItem from '@mui/lab/TimelineItem'; import TimelineSeparator from '@mui/lab/TimelineSeparator'; @@ -11,27 +12,32 @@ import TimelineOppositeContent, { function Schedule() { return ( - <Timeline> - <TimelineItem> - <TimelineOppositeContent> - 4:00 pm - </TimelineOppositeContent> - <TimelineSeparator> - <TimelineDot /> - <TimelineConnector /> - </TimelineSeparator> - <TimelineContent>Ceremony</TimelineContent> - </TimelineItem> - <TimelineItem> - <TimelineOppositeContent> - 5:00 pm - </TimelineOppositeContent> - <TimelineSeparator> - <TimelineDot /> - </TimelineSeparator> - <TimelineContent>Reception</TimelineContent> - </TimelineItem> - </Timeline> + <Paper> + <Typography variant="h6"> + Location and attire + </Typography> + <Timeline> + <TimelineItem> + <TimelineOppositeContent> + 4:00 pm + </TimelineOppositeContent> + <TimelineSeparator> + <TimelineDot /> + <TimelineConnector /> + </TimelineSeparator> + <TimelineContent>Ceremony</TimelineContent> + </TimelineItem> + <TimelineItem> + <TimelineOppositeContent> + 5:00 pm + </TimelineOppositeContent> + <TimelineSeparator> + <TimelineDot /> + </TimelineSeparator> + <TimelineContent>Reception</TimelineContent> + </TimelineItem> + </Timeline> + </Paper> ); } diff --git a/src/main.tsx b/src/main.tsx index 5364a01..9f33481 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client'; import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import App from './App'; -import Bar from './components/Bar'; +import NavBar from './components/NavBar'; import Home from './components/Home'; import Schedule from './components/Schedule'; import Registry from './components/Registry'; |