diff options
Diffstat (limited to 'client/src/components')
-rw-r--r-- | client/src/components/AdminLogin.tsx | 2 | ||||
-rw-r--r-- | client/src/components/BlurryLoadImg.tsx | 15 | ||||
-rw-r--r-- | client/src/components/Home.tsx | 28 | ||||
-rw-r--r-- | client/src/components/Schedule.tsx | 6 |
4 files changed, 14 insertions, 37 deletions
diff --git a/client/src/components/AdminLogin.tsx b/client/src/components/AdminLogin.tsx index 4d722e8..f1f676f 100644 --- a/client/src/components/AdminLogin.tsx +++ b/client/src/components/AdminLogin.tsx @@ -107,7 +107,7 @@ function GuestLogin() { endAdornment: ( <InputAdornment position="end"> <IconButton onClick={handleClickShowPassword}> - {showPassword ? <Visibility /> : <VisibilityOff />} + {showPassword ? <VisibilityOff /> : <Visibility />} </IconButton> </InputAdornment> ), diff --git a/client/src/components/BlurryLoadImg.tsx b/client/src/components/BlurryLoadImg.tsx deleted file mode 100644 index c28aa45..0000000 --- a/client/src/components/BlurryLoadImg.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { ClassAttributes, ImgHTMLAttributes } from 'react'; -import { JSX } from 'react/jsx-runtime'; -import { useBlurryLoad } from '../useBlurryLoad.ts'; - -export const BlurryLoadImg = ( - props: JSX.IntrinsicAttributes & - ClassAttributes<HTMLImageElement> & - ImgHTMLAttributes<HTMLImageElement> & { 'data-large': string } -) => { - useBlurryLoad(); - return ( - <img alt="" {...props} className={`blurry-load ${props.className}`}></img> - ); -}; diff --git a/client/src/components/Home.tsx b/client/src/components/Home.tsx index 79743a5..f735195 100644 --- a/client/src/components/Home.tsx +++ b/client/src/components/Home.tsx @@ -1,33 +1,30 @@ import React from 'react'; import { useEffect, useState } from 'react'; import './Carousel.css'; -import { BlurryLoadImg } from './BlurryLoadImg'; - -const images = [ - { small: '/small/engagement1.webp', full: '/full/engagement1.jpg' }, - { small: '/small/engagement2.webp', full: '/full/engagement2.jpg' }, - { small: '/small/engagement3.webp', full: '/full/engagement3.jpg' }, - { small: '/small/engagement4.webp', full: '/full/engagement4.jpg' }, - { small: '/small/engagement5.webp', full: '/full/engagement5.jpg' }, - { small: '/small/engagement6.webp', full: '/full/engagement6.jpg' }, -]; +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 [currentIndex, setIndex] = useState<number>(0); + const photos = [p0, p1, p2, p3, p4, p5]; useEffect(() => { const interval = setInterval(() => { setIndex((prevIndex) => - prevIndex === images.length - 1 ? 0 : prevIndex + 1 + prevIndex === photos.length - 1 ? 0 : prevIndex + 1 ); }, 3000); return () => clearInterval(interval); - }, [images.length]); + }, [photos.length]); return ( <div className="carousel-container"> <div className="carousel"> - {images.map((image, index) => ( + {photos.map((photo, index) => ( <div key={index} className={ @@ -36,10 +33,7 @@ function Home() { : 'carousel-slide' } > - <BlurryLoadImg - src={image.small} - data-large={`${image.full}`} - ></BlurryLoadImg> + <img src={photo}></img> </div> ))} </div> diff --git a/client/src/components/Schedule.tsx b/client/src/components/Schedule.tsx index fc1fb64..64140e4 100644 --- a/client/src/components/Schedule.tsx +++ b/client/src/components/Schedule.tsx @@ -6,6 +6,7 @@ import { useMediaQuery, useTheme, } from '@mui/material'; +import divineShepherd from '/divine-shepherd.jpg'; import InsertInvitationIcon from '@mui/icons-material/InsertInvitation'; import { useAppDispatch } from '../hooks'; import { showDialog } from '../slices/uiSlice'; @@ -26,12 +27,9 @@ function Schedule() { display: 'flex', justifyContent: 'center', alignItems: 'center', - backgroundImage: `url(${ - isMobile ? 'none' : '/small/divine-shepherd.webp' - })`, + backgroundImage: `url(${isMobile ? 'none' : divineShepherd})`, backgroundSize: 'cover', }} - data-large="/full/divine-shepherd.jpg" > <Paper elevation={3} |