diff options
| author | Michael Hunteman <michael@huntm.net> | 2024-07-06 17:01:40 -0700 |
|---|---|---|
| committer | Michael Hunteman <michael@huntm.net> | 2024-07-06 17:01:40 -0700 |
| commit | 8c65e5d0d8d62028d1f3ae59ae358eb7a2820dd0 (patch) | |
| tree | f09a1bae2aa4c42222b72d1ecf050a03c3246692 /client/src | |
| parent | 865d3fcb6780e209d209e4e7735c318ef32733dc (diff) | |
Move style to FlexBox component
Diffstat (limited to 'client/src')
| -rw-r--r-- | client/src/components/Schedule.tsx | 48 |
1 files changed, 21 insertions, 27 deletions
diff --git a/client/src/components/Schedule.tsx b/client/src/components/Schedule.tsx index a8648ed..bb5f809 100644 --- a/client/src/components/Schedule.tsx +++ b/client/src/components/Schedule.tsx @@ -1,6 +1,21 @@ import React from 'react'; import { Container, Paper, Typography, useTheme } from '@mui/material'; +const FlexBox = (props: any) => { + return ( + <div + style={{ + height: '100%', + width: '100%', + display: 'flex', + alignItems: 'center', + }} + > + {props.children} + </div> + ); +}; + function Schedule() { const theme = useTheme(); return ( @@ -32,30 +47,16 @@ function Schedule() { justifyContent: 'center', }} > - <div - style={{ - height: '100%', - width: '100%', - display: 'flex', - alignItems: 'center', - }} - > + <FlexBox> <div style={{ width: '35%' }}> <p>April 26, 2025</p> </div> <div style={{ width: '65%' }}> <Typography variant="h5">Wedding Schedule</Typography> </div> - </div> + </FlexBox> <hr style={{ width: '100%' }} /> - <div - style={{ - height: '100%', - width: '100%', - display: 'flex', - alignItems: 'center', - }} - > + <FlexBox> <div style={{ width: '35%' }}> <p>3:00 PM</p> </div> @@ -72,16 +73,9 @@ function Schedule() { </a> </p> </div> - </div> + </FlexBox> <hr style={{ width: '100%' }} /> - <div - style={{ - height: '100%', - width: '100%', - display: 'flex', - alignItems: 'center', - }} - > + <FlexBox> <div style={{ width: '35%' }}> <p>5:00 PM</p> </div> @@ -98,7 +92,7 @@ function Schedule() { </a> </p> </div> - </div> + </FlexBox> </div> </Paper> </Container> |