Initial commit

4 files changed, 197 insertions, 0 deletions

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;