From 8c65e5d0d8d62028d1f3ae59ae358eb7a2820dd0 Mon Sep 17 00:00:00 2001
From: Michael Hunteman <michael@huntm.net>
Date: Sat, 6 Jul 2024 17:01:40 -0700
Subject: Move style to FlexBox component
---
client/src/components/Schedule.tsx | 48 +++++++++++++++++---------------------
1 file changed, 21 insertions(+), 27 deletions(-)
(limited to 'client/src')
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>
--
cgit v1.2.3