Add carousel

1 files changed, 39 insertions, 24 deletions

diff --git a/src/components/RsvpForm.tsx b/src/components/RsvpForm.tsx
index d7efecf..090987b 100644
--- a/src/components/RsvpForm.tsx
+++ b/src/components/RsvpForm.tsx
@@ -10,14 +10,19 @@ import {
   TextField,
 } from '@mui/material';
 import { useForm, Controller } from 'react-hook-form';
-import { useOutletContext } from "react-router-dom";
+import { useOutletContext } from 'react-router-dom';
 import { useUpdateGuestMutation, Guest } from '../apiSlice';
 
 function RsvpForm() {
   const [updateGuest] = useUpdateGuestMutation();
   const guest: Guest = useOutletContext();
 
-  const { register, handleSubmit, control, formState: { errors } } = useForm({
+  const {
+    register,
+    handleSubmit,
+    control,
+    formState: { errors },
+  } = useForm({
     defaultValues: {
       id: guest?.id,
       firstName: guest?.firstName,
@@ -25,22 +30,27 @@ function RsvpForm() {
       attendance: '',
       email: '',
       partySize: 1,
-      message: ''
-    }
+      message: '',
+    },
   });
 
   const onSubmit = async (data: Guest) => {
-    updateGuest({...data});
+    updateGuest({ ...data });
   };
 
   return (
-    <Container component="form" maxWidth="sm" noValidate onSubmit={handleSubmit(onSubmit)}>
+    <Container
+      component="form"
+      maxWidth="sm"
+      noValidate
+      onSubmit={handleSubmit(onSubmit)}
+    >
       <Grid container spacing={2} sx={{ mt: 8 }}>
         <Grid item xs={12}>
           <p>
-            Please RSVP for the wedding by March 10, 2025.
-            The ceremony will commence at 3 pm on April 26 in ...
-            The reception will follow at 5 pm in A Venue on the Ridge.
+            Please RSVP for the wedding by March 10, 2025. The ceremony will
+            commence at 3 pm on April 26 in ... The reception will follow at 5
+            pm in A Venue on the Ridge.
           </p>
         </Grid>
         <Grid item xs={12}>
@@ -81,12 +91,13 @@ function RsvpForm() {
             error={!!errors.email}
             helperText={errors.email?.message}
             required
-            {...register('email',
-              { required: 'This field is required',
-                pattern: { value: /\S+@\S+\.\S+/,
-                  message: 'Please enter a valid email address' }
-              }
-            )}
+            {...register('email', {
+              required: 'This field is required',
+              pattern: {
+                value: /\S+@\S+\.\S+/,
+                message: 'Please enter a valid email address',
+              },
+            })}
           />
         </Grid>
         <Grid item xs={12} md={6} lg={6}>
@@ -98,12 +109,14 @@ function RsvpForm() {
             error={!!errors.partySize}
             helperText={errors.partySize?.message}
             required
-            {...register('partySize',
-              { required: 'This field is required',
-                min: { value: 1, message: 'Please enter a positive integer' },
-                max: { value: 9, message: 'Please enter an integer less than 10' }
-              }
-            )}
+            {...register('partySize', {
+              required: 'This field is required',
+              min: { value: 1, message: 'Please enter a positive integer' },
+              max: {
+                value: 9,
+                message: 'Please enter an integer less than 10',
+              },
+            })}
           />
         </Grid>
         <Grid item xs={12}>
@@ -118,9 +131,11 @@ function RsvpForm() {
         </Grid>
         <Grid item xs={12}>
           <div
-            style={{ display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center' }}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+            }}
           >
             <Button type="submit" variant="contained">
               RSVP