From e8394fe42df383e9ffe42eba426387372be1229c Mon Sep 17 00:00:00 2001
From: "sharie.rhea" <sharierhea@gmail.com>
Date: Thu, 22 Feb 2024 18:25:30 -0500
Subject: [PATCH] Adds TextSection component

---
 src/Components/TextSection.js | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 src/Components/TextSection.js

diff --git a/src/Components/TextSection.js b/src/Components/TextSection.js
new file mode 100644
index 0000000..cde4e3f
--- /dev/null
+++ b/src/Components/TextSection.js
@@ -0,0 +1,27 @@
+import React from 'react';
+
+export default function TextSection( { title, subtext, image, altText, alignment = "left" }) {
+    // No image is provided, display only text
+    if (image == null) {
+        return (
+            <div id="text-section-text" style={{maxWidth: '50vw'}}>
+                <h1>{title}</h1>
+                <p>{subtext}</p>
+            </div>
+        )
+    }
+
+    // Left alignment aligns text to the left hand side, otherwise text is aligned to the right of the image
+    const flexDirection = (alignment === "left") ? "row" : "row-reverse";
+    return (
+        <div id="text-section" style={{width: '100%', maxWidth: '50vw', display: "flex", flexDirection: flexDirection, alignItems: 'flex-start', justifyContent: 'space-between'}}>
+        <div id="text-section-text" style={{padding: '0 4em'}}>
+            <h1>{title}</h1>
+            <p>{subtext}</p>
+        </div>
+        <div id="text-section-image">
+            <img src={image}  alt={altText}/>
+        </div>
+        </div>
+    );
+}
\ No newline at end of file