Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds TextSection component #9

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Adds TextSection component #9

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions src/Components/TextSection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'}}>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change this div to a MaterialUI Box element. Eventually we want to add a dark and light theme to the website and using Boxes will allow us to toggle each element's theme much more easier than using normal divs.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Other than format, everything looks good. Brandon said make it adjustable to themes for light and dark mode.

<h1>{title}</h1>
<p>{subtext}</p>
</div>
<div id="text-section-image">
<img src={image} alt={altText}/>
</div>
</div>
);
}