diff --git a/src/components/NavBar/NavbarDesktop.tsx b/src/components/NavBar/NavbarDesktop.tsx index 1a1e09e135..118897fc94 100644 --- a/src/components/NavBar/NavbarDesktop.tsx +++ b/src/components/NavBar/NavbarDesktop.tsx @@ -9,6 +9,7 @@ import Team from '../../pages/Team'; import Sponsors from '../../pages/Sponsors'; // import Blog from '../../pages/Blog/Blog'; // Commented out March 21st 2025 + import Link from './Link'; const NavbarContainer = styled.div` diff --git a/src/components/OurTeam/OurTeam.tsx b/src/components/OurTeam/OurTeam.tsx index 7353b43bad..44afa0750e 100644 --- a/src/components/OurTeam/OurTeam.tsx +++ b/src/components/OurTeam/OurTeam.tsx @@ -39,6 +39,9 @@ const OurTeam: React.FC = () => ( provide an effective mentorship experience for all new team members.

+

+ Curious how you can help? Here is a list of our teams, what they do, as well as the team leads. +

waterloop diff --git a/src/components/TextWithProfileImage/README.md b/src/components/TextWithProfileImage/README.md new file mode 100644 index 0000000000..e0157c6320 --- /dev/null +++ b/src/components/TextWithProfileImage/README.md @@ -0,0 +1,33 @@ +# Text with Image Component ReadMe + +## Purpose: + +Displays text, along with an circular image beside it. Can be configured to also display a title and a button that redirects the user to a link. Used to display the team leads under the "teams" section. + +## How to create: + +Pass in **list of JSON data** into the prop parameter _**data**_, with each JSON entry containing the following parameters: + +```JSON +{ + "title": "The title to display (optional)", + "text": "The descriptive text (required)", + "link": "Link to redirect user to when they click the 'VIEW MORE' button (optional - button hidden when parameter not provided)" +} +``` +### IMPORTANT NOTE: + +Because of the way images are stored, **you also have to manually import the images into the parent component using TextWithImage** from the `static/img` folder and pass them into a `string[]` type variable in the same order as the corresponding JSON entries. + + +Additionally, you can change the layout to only display text on the **left** or on the **right** by passing either value into the prop parameter _**textPos**_. By default, this is set to **alternate** the text position between left and right. + +## Notes: + +1. Please don't use too many words in the title and description. + +2. Responsive design for (mobile) devices under **500px** width. + +3. Left and right border padding of the components is assumed to be done by the parent component for the mobile view. + +4. If you have any questions, contact Jeff at [j256ma@uwaterloo.ca](j256ma@uwaterloo.ca) or [jeff.m@waterloop.ca](jeff.m@waterloop.ca) \ No newline at end of file diff --git a/src/components/TextWithProfileImage/TextWithProfileImage.tsx b/src/components/TextWithProfileImage/TextWithProfileImage.tsx new file mode 100644 index 0000000000..40369ddb97 --- /dev/null +++ b/src/components/TextWithProfileImage/TextWithProfileImage.tsx @@ -0,0 +1,83 @@ +import React from 'react'; +import { Button } from 'components/Button'; +import 'theme/styles.scss'; + +export type MyCircularProps = { + title?: string; + text: string; + link?: string; + linkText?: string; +}; + +interface Props { + data: MyCircularProps[]; + imgData: string[]; + textPos?: string; +} + +export class TextWithProfileImage extends React.Component { + renderChildren = (data: MyCircularProps[]): React.ReactElement[] => { + let isRightLeft = true; // Alternate between right-left and left-right layout. + let key = -1; + return data.map((entry: MyCircularProps) => { + isRightLeft = !isRightLeft; + key += 1; + + // Determine if image should be displayed first or after text: + let posClass = ''; + switch (this.props.textPos) { + case 'left': + posClass = 'left-right-variant'; + break; + case 'right': + posClass = 'right-left-variant'; + break; + + default: + // The "alternate" case + posClass = isRightLeft ? 'right-left-variant' : 'left-right-variant'; + } + + return ( +
+
+ {entry.title !== undefined ?

{entry.title}

: } +

{entry.text}

+
+ {this.renderButton(entry.link, entry.linkText)} +
+
+ waterloop +
+ {this.renderButton(entry.link, entry.linkText)} +
+
+ ); + }); + }; + + renderButton = ( + link: string | undefined, + linkText: string | undefined, + ): React.ReactElement => { + if (link !== undefined && linkText !== undefined) { + return ( +