From 491ae774cf68ffaad8e6957d818c6e2e6588016e Mon Sep 17 00:00:00 2001 From: Michael Hunteman Date: Sun, 28 Jul 2024 15:24:21 -0700 Subject: Add photos --- client/public/EngagmentSession_06.23.2024-131.jpg | Bin 0 -> 2188838 bytes client/public/EngagmentSession_06.23.2024-161.jpg | Bin 0 -> 3150499 bytes client/public/EngagmentSession_06.23.2024-164.jpg | Bin 0 -> 3437736 bytes client/public/EngagmentSession_06.23.2024-259.jpg | Bin 0 -> 1643595 bytes client/public/EngagmentSession_06.23.2024-267.jpg | Bin 0 -> 1699370 bytes client/public/EngagmentSession_06.23.2024-284.jpg | Bin 0 -> 3429096 bytes client/public/divine-shepherd.jpg | Bin 0 -> 202918 bytes client/src/components/Carousel.css | 24 +++++ client/src/components/GuestLogin.tsx | 21 ++-- client/src/components/Home.tsx | 69 +++++------- client/src/components/NavBar.tsx | 2 +- client/src/components/Registry.tsx | 6 +- client/src/components/RsvpForm.tsx | 19 ++-- client/src/components/Schedule.tsx | 126 ++++++++++------------ client/src/main.css | 2 +- 15 files changed, 141 insertions(+), 128 deletions(-) create mode 100644 client/public/EngagmentSession_06.23.2024-131.jpg create mode 100644 client/public/EngagmentSession_06.23.2024-161.jpg create mode 100644 client/public/EngagmentSession_06.23.2024-164.jpg create mode 100644 client/public/EngagmentSession_06.23.2024-259.jpg create mode 100644 client/public/EngagmentSession_06.23.2024-267.jpg create mode 100644 client/public/EngagmentSession_06.23.2024-284.jpg create mode 100644 client/public/divine-shepherd.jpg create mode 100644 client/src/components/Carousel.css diff --git a/client/public/EngagmentSession_06.23.2024-131.jpg b/client/public/EngagmentSession_06.23.2024-131.jpg new file mode 100644 index 0000000..0657a40 Binary files /dev/null and b/client/public/EngagmentSession_06.23.2024-131.jpg differ diff --git a/client/public/EngagmentSession_06.23.2024-161.jpg b/client/public/EngagmentSession_06.23.2024-161.jpg new file mode 100644 index 0000000..92b5be5 Binary files /dev/null and b/client/public/EngagmentSession_06.23.2024-161.jpg differ diff --git a/client/public/EngagmentSession_06.23.2024-164.jpg b/client/public/EngagmentSession_06.23.2024-164.jpg new file mode 100644 index 0000000..529a324 Binary files /dev/null and b/client/public/EngagmentSession_06.23.2024-164.jpg differ diff --git a/client/public/EngagmentSession_06.23.2024-259.jpg b/client/public/EngagmentSession_06.23.2024-259.jpg new file mode 100644 index 0000000..075480c Binary files /dev/null and b/client/public/EngagmentSession_06.23.2024-259.jpg differ diff --git a/client/public/EngagmentSession_06.23.2024-267.jpg b/client/public/EngagmentSession_06.23.2024-267.jpg new file mode 100644 index 0000000..7222c16 Binary files /dev/null and b/client/public/EngagmentSession_06.23.2024-267.jpg differ diff --git a/client/public/EngagmentSession_06.23.2024-284.jpg b/client/public/EngagmentSession_06.23.2024-284.jpg new file mode 100644 index 0000000..2f06a42 Binary files /dev/null and b/client/public/EngagmentSession_06.23.2024-284.jpg differ diff --git a/client/public/divine-shepherd.jpg b/client/public/divine-shepherd.jpg new file mode 100644 index 0000000..c89749e Binary files /dev/null and b/client/public/divine-shepherd.jpg differ diff --git a/client/src/components/Carousel.css b/client/src/components/Carousel.css new file mode 100644 index 0000000..e2fbc1c --- /dev/null +++ b/client/src/components/Carousel.css @@ -0,0 +1,24 @@ +.carousel-container { + height: 100%; + width: 100%; +} + +.carousel { + overflow: hidden; + height: 100%; + width: 100%; +} + +.carousel-slide { + display: none; +} + +.carousel-slide.active-slide { + display: flex; +} + +.carousel img { + width: 100%; + max-height: 100vh; + object-fit: cover; +} diff --git a/client/src/components/GuestLogin.tsx b/client/src/components/GuestLogin.tsx index c06bc6e..16b4478 100644 --- a/client/src/components/GuestLogin.tsx +++ b/client/src/components/GuestLogin.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { useNavigate } from 'react-router-dom'; import { useDispatch } from 'react-redux'; -import { Button, Container, TextField, Typography } from '@mui/material'; +import { Button, TextField, Typography } from '@mui/material'; import { useForm } from 'react-hook-form'; import { setCredentials } from '../slices/authSlice'; import { useLoginMutation } from '../slices/apiSlice'; @@ -33,17 +33,26 @@ function GuestLogin() { }; return ( -
@@ -72,7 +81,7 @@ function GuestLogin() { Log in
- + ); } diff --git a/client/src/components/Home.tsx b/client/src/components/Home.tsx index 558c104..bfa3fa8 100644 --- a/client/src/components/Home.tsx +++ b/client/src/components/Home.tsx @@ -1,51 +1,40 @@ import React from 'react'; -import { useEffect, useRef, useState } from 'react'; +import { useEffect, useState } from 'react'; +import './Carousel.css'; +import p0 from '/EngagmentSession_06.23.2024-131.jpg'; +import p1 from '/EngagmentSession_06.23.2024-161.jpg'; +import p2 from '/EngagmentSession_06.23.2024-164.jpg'; +import p3 from '/EngagmentSession_06.23.2024-259.jpg'; +import p4 from '/EngagmentSession_06.23.2024-267.jpg'; +import p5 from '/EngagmentSession_06.23.2024-284.jpg'; function Home() { - const [index, setIndex] = useState(0); - const colors = ['#FF0000', '#00FF00', '#0000FF']; - const timeout = useRef(0); + const [currentIndex, setIndex] = useState(0); + const photos = [p0, p1, p2, p3, p4, p5]; 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); - } - }; + const interval = setInterval(() => { + setIndex((prevIndex) => + prevIndex === photos.length - 1 ? 0 : prevIndex + 1 + ); + }, 5000); + return () => clearInterval(interval); + }, [photos.length]); return ( -
-
- {colors.map((backgroundColor, colorIndex) => ( +
+
+ {photos.map((photo, index) => (
+ key={index} + className={ + index === currentIndex + ? 'carousel-slide active-slide' + : 'carousel-slide' + } + > + +
))}
diff --git a/client/src/components/NavBar.tsx b/client/src/components/NavBar.tsx index a8e0a14..7cae800 100644 --- a/client/src/components/NavBar.tsx +++ b/client/src/components/NavBar.tsx @@ -9,7 +9,7 @@ function NavBar() { const isMobile = useMediaQuery('(max-width: 768px)'); return ( - + -

Registry

- +
+

Registry

+
); } diff --git a/client/src/components/RsvpForm.tsx b/client/src/components/RsvpForm.tsx index 4454c77..63981f8 100644 --- a/client/src/components/RsvpForm.tsx +++ b/client/src/components/RsvpForm.tsx @@ -1,10 +1,9 @@ import React from 'react'; import { useRef } from 'react'; -import { useNavigate, useOutletContext } from 'react-router-dom'; +import { useOutletContext } from 'react-router-dom'; import { Alert, Button, - Container, FormControl, FormControlLabel, FormLabel, @@ -22,7 +21,6 @@ function RsvpForm() { useUpdateGuestMutation(); const guest: Guest = useOutletContext(); const previousPartySize = useRef(guest?.partySize - 1); - const navigate = useNavigate(); const { register, @@ -77,13 +75,18 @@ function RsvpForm() { }; return ( - - +

Please RSVP for the wedding by March 10, 2025. The ceremony will @@ -236,7 +239,7 @@ function RsvpForm() {

- + ); } diff --git a/client/src/components/Schedule.tsx b/client/src/components/Schedule.tsx index bb5f809..cc6e8bd 100644 --- a/client/src/components/Schedule.tsx +++ b/client/src/components/Schedule.tsx @@ -1,12 +1,11 @@ import React from 'react'; -import { Container, Paper, Typography, useTheme } from '@mui/material'; +import { Paper, Typography, useTheme } from '@mui/material'; +import divineShepherd from '/divine-shepherd.jpg'; const FlexBox = (props: any) => { return (
{ function Schedule() { const theme = useTheme(); return ( - -
- -
-

April 26, 2025

-
-
- Wedding Schedule -
- -
- -
-

3:00 PM

-
-
- Ceremony -

- Divine Shepherd -
- - 15005 Q St, Omaha, NE 68137 - -

-
- -
- -
-

5:00 PM

-
-
- Reception -

- A Venue on the Ridge -
- - 20033 Elkhorn Ridge Dr, Elkhorn, NE 68022 - -

-
- -
+ +
+

April 26, 2025

+
+
+ Wedding Schedule +
+ +
+ +
+

3:00 PM

+
+
+ Ceremony +

+ Divine Shepherd +
+ + 15005 Q St, Omaha, NE 68137 + +

+
+ +
+ +
+

5:00 PM

+
+
+ Reception +

+ A Venue on the Ridge +
+ + 20033 Elkhorn Ridge Dr, Elkhorn, NE 68022 + +

+
+ - +
); } diff --git a/client/src/main.css b/client/src/main.css index 5cb7cd6..1ef15c5 100644 --- a/client/src/main.css +++ b/client/src/main.css @@ -1,4 +1,4 @@ #root, body { - height: 100vh; + height: 100dvh; margin: 0 } -- cgit v1.2.3