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/components/Schedule.tsx')

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