Merge pull request #862: Update people component

nextstrain · May 15, 2024 · d532048 · d532048
2 parents a771e20 + 4047edc
commit d532048
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 39 deletions.
diff --git a/static-site/src/components/Footer/index.jsx b/static-site/src/components/Footer/index.jsx
@@ -3,7 +3,7 @@ import Link from 'next/link'
 import * as Styles from "../splash/styles";
 import { SmallSpacer, BigSpacer } from "../../layouts/generalComponents";
 import { Logos } from "../../components/logos";
-import { ListOfPeople } from "../People/avatars";
+import { FooterList } from "../People/avatars";
 
 const SplashImagesCredit = () => (
   <div className="row">
@@ -67,7 +67,7 @@ class Footer extends React.Component {
                   <div style={{margin: "10px 0px"}}/>
                   The core Nextstrain team is
                   <div style={{margin: "0px 0px"}}/>
-                  <ListOfPeople people="current" />
+                  <FooterList />
                   {"Please see the "}
                   <Link href="/team">team page</Link>
                   {" for more details."}

diff --git a/static-site/src/components/People/avatars.jsx b/static-site/src/components/People/avatars.jsx
@@ -77,47 +77,56 @@ const Comma = () => (
   </span>
 )
 
-const Avatar = ({name, image, link, blurb, teamPage, comma=false}) => {
-  if (teamPage) {
+const MaybeLinked = ({ link, children }) => {
+  if (link) {
     return (
-      <>
-        <Sideways style={{alignItems: blurb ? "top" : "center"}}>
-          <a href={link}><img alt={name} src={require("../../../static/team/"+image).default.src}/></a>
-          <UpDown>
-            <a href={link}><Name>{name}</Name></a>
-            {blurb && (
-              <Blurb>{blurb}</Blurb>
-            )}
-          </UpDown>
-        </Sideways>
-        {comma && <Comma/>}
-      </>
-    );
-  }
-  return (
-    <>
       <a href={link}>
-        <img alt={name} src={require("../../../static/team/"+image).default.src}/>
-        <Name>{name}</Name>
+        {children}
       </a>
-      {comma && <Comma/>}
-    </>
-  );
-};
+    )
+  }
+  return children
+}
+
+export const TeamPageList = ({membersKey}) => {
 
-export const ListOfPeople = ({people, teamPage=false}) => {
+  const people = teamMembers[membersKey];
 
-  const ppl = people==="current" ?
-    [...teamMembers['founders'], ...teamMembers['core']] :
-    teamMembers[people];
+  return (
+    <BodyWrapper>
+      {people.map((person) => 
+        <Sideways key={person.name} style={{alignItems: person.blurb ? "top" : "center"}}>
+          <MaybeLinked link={person.link}>
+              <img alt={person.name} src={require("../../../static/team/"+person.image).default.src}/>
+            </MaybeLinked>
+          <UpDown>
+            <MaybeLinked link={person.link}>
+                <Name>{person.name}</Name>
+              </MaybeLinked>
+            {person.blurb && (
+              <Blurb>{person.blurb}</Blurb>
+            )}
+          </UpDown>
+        </Sideways>
+      )}
+    </BodyWrapper>
+  )
+}
 
-  const Wrapper = teamPage ? BodyWrapper : FooterWrapper;
+export const FooterList = () => {
+  const people = [...teamMembers['founders'], ...teamMembers['core']];
 
   return (
-    <Wrapper>
-      {ppl.map((p, i) => 
-        <Avatar key={p.name} {...p} teamPage={teamPage} comma={!teamPage && i+1!==ppl.length}/>
+    <FooterWrapper>
+      {people.map((person, i) => 
+        <div key={person.name}>
+          <MaybeLinked link={person.link}>
+            <img alt={person.name} src={require("../../../static/team/"+person.image).default.src}/>
+            <Name>{person.name}</Name>
+          </MaybeLinked>
+          {i+1!==people.length && <Comma/>}
+        </div>
       )}
-    </Wrapper>
+    </FooterWrapper>
   )
 }
diff --git a/static-site/src/pages/team.jsx b/static-site/src/pages/team.jsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 import GenericPage from "../layouts/generic-page";
 import { BigSpacer, FlexCenter} from "../layouts/generalComponents";
 import { CenteredFocusParagraph } from "../components/splash/styles";
-import { ListOfPeople } from "../components/People/avatars";
+import { TeamPageList } from "../components/People/avatars";
 
 const H1 = styled.div`
   text-align: center;
@@ -28,15 +28,15 @@ const TeamPage = () => {
         </CenteredFocusParagraph>
       </FlexCenter>
 
-      <ListOfPeople people="founders" teamPage />
+      <TeamPageList membersKey="founders" />
 
       <FlexCenter>
         <CenteredFocusParagraph>
           {"The core team currently working on Nextstrain are:"}
         </CenteredFocusParagraph>
       </FlexCenter>
 
-      <ListOfPeople people="core" teamPage />
+      <TeamPageList membersKey="core" />
 
       <H1>Nextstrain Alumni</H1>
       <FlexCenter>
@@ -50,7 +50,7 @@ const TeamPage = () => {
 
       <BigSpacer/>
 
-      <ListOfPeople people="alumni" teamPage />
+      <TeamPageList membersKey="alumni" />
     </div>
   );
 };