diff options
| -rw-r--r-- | src/components/Home.tsx | 78 | ||||
| -rw-r--r-- | src/components/RsvpForm.tsx | 4 | ||||
| -rw-r--r-- | src/components/active.css | 3 |
3 files changed, 41 insertions, 44 deletions
diff --git a/src/components/Home.tsx b/src/components/Home.tsx index da9eb6b..4d4428a 100644 --- a/src/components/Home.tsx +++ b/src/components/Home.tsx @@ -28,48 +28,44 @@ function Home() { }; 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 style={{ margin: 'auto', overflow: 'hidden' }}> + <div + style={{ + whiteSpace: 'nowrap', + transform: `translateX(${-index * 100}%)`, + transition: 'ease 1000ms', + }} + > + {colors.map((backgroundColor, colorIndex) => ( + <div + key={colorIndex} + style={{ + display: 'inline-block', + backgroundColor, + height: '80vh', + width: '100%', + }} + /> + ))} </div> - </> + <div style={{ display: 'flex', justifyContent: 'center' }}> + {colors.map((_, colorIndex) => ( + <div + key={colorIndex} + style={{ + height: '0.75rem', + width: '0.75rem', + borderRadius: '50%', + margin: '0.75rem', + }} + className={colorIndex === index ? 'active' : 'inactive'} + onClick={() => { + setIndex(colorIndex); + }} + /> + ))} + </div> + </div> ); } diff --git a/src/components/RsvpForm.tsx b/src/components/RsvpForm.tsx index 090987b..56d8c62 100644 --- a/src/components/RsvpForm.tsx +++ b/src/components/RsvpForm.tsx @@ -49,8 +49,8 @@ function RsvpForm() { <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. + commence at 3 pm on April 26 in Divine Shepherd. The reception will + follow at 5 pm in A Venue on the Ridge. </p> </Grid> <Grid item xs={12}> diff --git a/src/components/active.css b/src/components/active.css index 60feeea..b3841d1 100644 --- a/src/components/active.css +++ b/src/components/active.css @@ -1,6 +1,7 @@ .active { background-color: #1976d2; } + .inactive { background-color: #c4c4c4; -}
\ No newline at end of file +} |