Initial commit

1 files changed, 106 insertions, 0 deletions

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;