diff options
| author | Michael Hunteman <michael@huntm.net> | 2024-03-12 19:47:28 -0700 |
|---|---|---|
| committer | Michael Hunteman <michael@huntm.net> | 2024-03-12 19:47:28 -0700 |
| commit | 3c878200e4fb012de5a4ac0b93377a6643e33027 (patch) | |
| tree | 003d72649b0af533ecde6dfeee05e95891300cc4 /src/components/Home.tsx | |
| parent | 5e5560b558ff818546c94135bebf334be770c920 (diff) | |
Fix home style
Diffstat (limited to 'src/components/Home.tsx')
| -rw-r--r-- | src/components/Home.tsx | 78 |
1 files changed, 37 insertions, 41 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> ); } |