Add carousel

6 files changed, 140 insertions, 34 deletions

diff --git a/src/components/Admin.tsx b/src/components/Admin.tsx
index bd1545d..a3da3fa 100644
--- a/src/components/Admin.tsx
+++ b/src/components/Admin.tsx
@@ -6,17 +6,17 @@ function Admin() {
     isLoading,
     isSuccess,
     isError,
-    error
+    error,
   } = useGetGuestsQuery();
 
   let content;
 
   if (isLoading) {
-    content = <p>Loading...</p>
+    content = <p>Loading...</p>;
   } else if (isSuccess) {
     content = JSON.stringify(guests);
   } else if (isError) {
-    content = <>{error.toString()}</>
+    content = <>{error.toString()}</>;
   }
 
   return (
diff --git a/src/components/Desktop.tsx b/src/components/Desktop.tsx
index 34a0621..983c929 100644
--- a/src/components/Desktop.tsx
+++ b/src/components/Desktop.tsx
@@ -1,6 +1,6 @@
 import { useContext } from 'react';
-import { Link } from "react-router-dom";
-import { Button, IconButton } from "@mui/material";
+import { Link } from 'react-router-dom';
+import { Button, IconButton } from '@mui/material';
 import DarkModeIcon from '@mui/icons-material/DarkMode';
 import LightModeIcon from '@mui/icons-material/LightMode';
 import { useTheme } from '@mui/material/styles';
@@ -13,7 +13,7 @@ function Desktop() {
 
   return (
     <div style={{ marginLeft: 'auto' }}>
-      {pages.map(page => (
+      {pages.map((page) => (
         <Button color="inherit" component={Link} to={page?.to} key={page?.name}>
           {page?.name}
         </Button>
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
new file mode 100644
index 0000000..da9eb6b
--- /dev/null
+++ b/src/components/Home.tsx
@@ -0,0 +1,76 @@
+import { useEffect, useRef, useState } from 'react';
+import './active.css';
+
+function Home() {
+  const [index, setIndex] = useState(0);
+  const colors = ['#FF0000', '#00FF00', '#0000FF'];
+  const timeout = useRef(0);
+
+  useEffect(() => {
+    resetTimeout();
+    timeout.current = window.setTimeout(
+      () =>
+        setIndex((prevIndex) =>
+          prevIndex === colors.length - 1 ? 0 : prevIndex + 1
+        ),
+      2500
+    );
+
+    return () => {
+      resetTimeout();
+    };
+  }, [index]);
+
+  const resetTimeout = () => {
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+    }
+  };
+
+  return (
+    <>
+      <div style={{ margin: 'auto', overflow: 'hidden' }}>
+        <div
+          style={{
+            whiteSpace: 'nowrap',
+            transform: `translate3d(${-index * 100}%, 0, 0)`,
+            transition: 'ease 1000ms',
+          }}
+        >
+          {colors.map((backgroundColor, colorIndex) => (
+            <div
+              key={colorIndex}
+              style={{
+                display: 'inline-block',
+                backgroundColor,
+                height: '80vh',
+                width: '100%',
+              }}
+            />
+          ))}
+        </div>
+        <div style={{ textAlign: 'center' }}>
+          {colors.map((_, colorIndex) => (
+            <div
+              key={colorIndex}
+              style={{
+                display: 'inline-block',
+                height: '0.8rem',
+                width: '0.8rem',
+                borderRadius: '50%',
+                cursor: 'pointer',
+                margin: '0.7rem 0.7rem 0.7rem',
+              }}
+              className={colorIndex === index ? 'active' : 'inactive'}
+              onClick={() => {
+                setIndex(colorIndex);
+              }}
+            />
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Home;
diff --git a/src/components/Mobile.tsx b/src/components/Mobile.tsx
index f2ca255..f5502c0 100644
--- a/src/components/Mobile.tsx
+++ b/src/components/Mobile.tsx
@@ -1,7 +1,7 @@
 import { useContext } from 'react';
-import { Link } from "react-router-dom";
+import { Link } from 'react-router-dom';
 import { useState } from 'react';
-import { Button, IconButton, Menu, MenuItem } from "@mui/material";
+import { Button, IconButton, Menu, MenuItem } from '@mui/material';
 import DarkModeIcon from '@mui/icons-material/DarkMode';
 import LightModeIcon from '@mui/icons-material/LightMode';
 import { useTheme } from '@mui/material/styles';
@@ -27,13 +27,22 @@ function Mobile() {
       <IconButton color="inherit" onClick={toggleColorMode}>
         {theme.palette.mode === 'dark' ? <DarkModeIcon /> : <LightModeIcon />}
       </IconButton>
-      <IconButton color="inherit" sx={{ ml: 'auto' }} onClick={handleOpenNavMenu}>
+      <IconButton
+        color="inherit"
+        sx={{ ml: 'auto' }}
+        onClick={handleOpenNavMenu}
+      >
         <MenuIcon />
       </IconButton>
       <Menu anchorEl={anchorEl} open={!!anchorEl} onClose={handleCloseNavMenu}>
         {pages.map((page) => (
           <MenuItem key={page.name} onClick={handleCloseNavMenu}>
-            <Button color="inherit" component={Link} to={page?.to} key={page?.name}>
+            <Button
+              color="inherit"
+              component={Link}
+              to={page?.to}
+              key={page?.name}
+            >
               {page?.name}
             </Button>
           </MenuItem>
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
diff --git a/src/components/active.css b/src/components/active.css
new file mode 100644
index 0000000..60feeea
--- /dev/null
+++ b/src/components/active.css
@@ -0,0 +1,6 @@
+.active {
+  background-color: #1976d2;
+}
+.inactive {
+  background-color: #c4c4c4;
+}
\ No newline at end of file