diff --git a/landing/team-profile.css b/landing/team-profile.css new file mode 100644 index 000000000..a7c8a39ab --- /dev/null +++ b/landing/team-profile.css @@ -0,0 +1,46 @@ +.profile { + display: flex; + flex-direction: column; + align-items: center; + min-width: 175px; +} + +.profile img { + border-radius: 8px; + max-width: 125px; + max-height: 125px; + margin-bottom: 8px; +} + +.profile p { + flex-grow: 1; + font-size: 18px; + text-align: center; +} + +.profile small { + color: var(--grey); + font-size: 16px; + text-align: center; +} + +.profile span svg { + color: var(--grey); +} + +.profile span svg:hover { + color: var(--white); +} + +.profile span { + text-align: center; +} + +.profile span > a + a { + padding-left: 8px; +} + +.profile span > a { + color: var(--white); + font-size: 20px; +} diff --git a/landing/team-profile.react.js b/landing/team-profile.react.js new file mode 100644 index 000000000..88053a04c --- /dev/null +++ b/landing/team-profile.react.js @@ -0,0 +1,63 @@ +// @flow + +import { faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import * as React from 'react'; + +import css from './team-profile.css'; + +type Props = { + +name: string, + +role: string, + +imageURL: string, + +githubHandle?: string, + +twitterHandle?: string, +}; + +const iconProps = { + size: 'm', +}; + +function TeamProfile(props: Props): React.Node { + const { name, role, imageURL, githubHandle, twitterHandle } = props; + + let twitterLink; + if (twitterHandle) { + twitterLink = ( + + + + ); + } + + let githubLink; + if (githubHandle) { + githubLink = ( + + + + ); + } + + return ( +
+ {`portrait +

{name}

+ {role} + + {githubLink} + {twitterLink} + +
+ ); +} + +export default TeamProfile; diff --git a/landing/team.react.js b/landing/team.react.js index 88451bcdb..e5b96b148 100644 --- a/landing/team.react.js +++ b/landing/team.react.js @@ -1,13 +1,78 @@ // @flow import * as React from 'react'; +import { assetsCacheURLPrefix } from './asset-meta-data'; +import TeamProfile from './team-profile.react.js'; + function Team(): React.Node { return (
-

Team page

+

Team

+
+ + + + + + + + + +
); } export default Team;