summaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/Admin.tsx6
-rw-r--r--src/components/Desktop.tsx6
-rw-r--r--src/components/Home.tsx76
-rw-r--r--src/components/Mobile.tsx17
-rw-r--r--src/components/RsvpForm.tsx63
-rw-r--r--src/components/active.css6
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
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-19 06:40:07 +0000