diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.tsx | 36 | ||||
| -rw-r--r-- | src/components/Bar.tsx | 39 | ||||
| -rw-r--r-- | src/components/Registry.tsx | 14 | ||||
| -rw-r--r-- | src/components/Rsvp.tsx | 106 | ||||
| -rw-r--r-- | src/components/Schedule.tsx | 38 | ||||
| -rw-r--r-- | src/main.tsx | 37 | ||||
| -rw-r--r-- | src/vite-env.d.ts | 1 |
7 files changed, 271 insertions, 0 deletions
diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..156719f --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,36 @@ +import React 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 Home from './components/Home'; +import Schedule from './components/Schedule'; +import Registry from './components/Registry'; +import Rsvp from './components/Rsvp'; + + +function App() { + const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); + + const theme = React.useMemo( + () => + createTheme({ + palette: { + mode: prefersDarkMode ? 'dark' : 'light' + } + }), + [prefersDarkMode] + ); + + return ( + <ThemeProvider theme={theme}> + <CssBaseline /> + <Bar /> + <Outlet /> + </ThemeProvider> + ); +} + +export default App; diff --git a/src/components/Bar.tsx b/src/components/Bar.tsx new file mode 100644 index 0000000..ce3db43 --- /dev/null +++ b/src/components/Bar.tsx @@ -0,0 +1,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; diff --git a/src/components/Registry.tsx b/src/components/Registry.tsx new file mode 100644 index 0000000..b07d680 --- /dev/null +++ b/src/components/Registry.tsx @@ -0,0 +1,14 @@ +import Paper from '@mui/material/Paper'; +import Typography from '@mui/material/Typography'; + +function Registry() { + return ( + <Paper> + <Typography variant="h4" component="h4"> + Registry + </Typography> + </Paper> + ); +} + +export default Registry; diff --git a/src/components/Rsvp.tsx b/src/components/Rsvp.tsx new file mode 100644 index 0000000..881bf09 --- /dev/null +++ b/src/components/Rsvp.tsx @@ -0,0 +1,106 @@ +import { useState } from 'react'; +import Button from '@mui/material/Button'; +import Paper from '@mui/material/Paper'; +import Grid from '@mui/material/Grid'; +import TextField from '@mui/material/TextField'; +import Typography from '@mui/material/Typography'; +import Radio from '@mui/material/Radio'; +import RadioGroup from '@mui/material/RadioGroup'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import FormControl from '@mui/material/FormControl'; +import FormLabel from '@mui/material/FormLabel'; + +function Rsvp() { + const [guestList, setGuestList] = useState([]); + + const onAddBtnClick = event => { + setGuestList(guestList.concat( + <Grid container spacing={2}> + <Grid item xs={6} md={6} lg={6}> + <TextField key={guestList.length} label="Name" variant="outlined" /> + </Grid> + <Grid item xs={6} md={6} lg={6}> + <FormControl> + <FormLabel>Meal Preference</FormLabel> + <RadioGroup> + <FormControlLabel + value="Beef" + control={<Radio />} + label="Beef" + /> + <FormControlLabel + value="Chicken" + control={<Radio />} + label="Chicken" + /> + <FormControlLabel + value="Fish" + control={<Radio />} + label="Fish" + /> + <FormControlLabel + value="Vegetarian" + control={<Radio />} + label="Vegetarian" + /> + </RadioGroup> + </FormControl> + </Grid> + </Grid> + )); + } + + return ( + <Paper> + <Grid container spacing={2}> + <Grid item xs={4} md={4} lg={4}> + <Typography>Date: April 14, 2025</Typography> + </Grid> + <Grid item xs={4} md={4} lg={4}> + <Typography>Location: </Typography> + </Grid> + <Grid item xs={4} md={4} lg={4}> + <Typography>RSVP Deadline: </Typography> + </Grid> + <Grid item xs={4} md={4} lg={4}> + <TextField required label="Name" variant="outlined" /> + </Grid> + <Grid item xs={4} md={4} lg={4}> + <FormControl> + <FormLabel>Are you attending?</FormLabel> + <RadioGroup> + <FormControlLabel value="Yes" control={<Radio />} label="Yes" /> + <FormControlLabel value="No" control={<Radio />} label="No" /> + </RadioGroup> + </FormControl> + </Grid> + <Grid item xs={4} md={4} lg={4}> + <Button + onClick={onAddBtnClick} + sx={{ maxWidth: 240 }} + variant="contained"> + Add Additional Guests + </Button> + </Grid> + {guestList} + <Grid item xs={6} md={6} lg={6}> + <TextField + label="Dietary Restrictions" + variant="outlined" + /> + </Grid> + <Grid item xs={6} md={6} lg={6}> + <TextField + label="Song Request" + variant="outlined" + /> + </Grid> + <Grid item> + <Button sx={{ maxWidth: 80 }} variant="contained">Submit</Button> + </Grid> + </Grid> + </Paper> + ); +} + +export default Rsvp; diff --git a/src/components/Schedule.tsx b/src/components/Schedule.tsx new file mode 100644 index 0000000..2fd0ab0 --- /dev/null +++ b/src/components/Schedule.tsx @@ -0,0 +1,38 @@ +import Typography from '@mui/material/Typography'; +import Timeline from '@mui/lab/Timeline'; +import TimelineItem from '@mui/lab/TimelineItem'; +import TimelineSeparator from '@mui/lab/TimelineSeparator'; +import TimelineConnector from '@mui/lab/TimelineConnector'; +import TimelineContent from '@mui/lab/TimelineContent'; +import TimelineDot from '@mui/lab/TimelineDot'; +import TimelineOppositeContent, { + timelineOppositeContentClasses, +} from '@mui/lab/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> + ); +} + +export default Schedule; diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..5364a01 --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import { createBrowserRouter, RouterProvider } from 'react-router-dom'; + +import App from './App'; +import Bar from './components/Bar'; +import Home from './components/Home'; +import Schedule from './components/Schedule'; +import Registry from './components/Registry'; +import Rsvp from './components/Rsvp'; + +const router = createBrowserRouter([ + { + path: "/", + element: <App />, + children: [ + { + path: "schedule", + element: <Schedule /> + }, + { + path: "registry", + element: <Registry /> + }, + { + path: "rsvp", + element: <Rsvp /> + } + ] + } +]); + +ReactDOM.createRoot(document.getElementById('root')).render( + <React.StrictMode> + <RouterProvider router={router} /> + </React.StrictMode> +); diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1 @@ +/// <reference types="vite/client" /> |