0
Fork 0
mirror of https://github.com/verdaccio/verdaccio.git synced 2024-12-16 21:56:25 -05:00
verdaccio/website/pages/en/team.js

179 lines
4.3 KiB
JavaScript
Raw Normal View History

const React = require('react');
const CompLibrary = require('../../core/CompLibrary.js');
const Container = CompLibrary.Container;
const siteConfig = require(process.cwd() + '/siteConfig.js');
const NetworkLink = props => {
if (props.text) {
return (
<div>
<img
style={{ marginRight: 4 }}
height={props.size}
width={props.size}
src={props.iconSource}
alt={props.iconAlt}
/>
<a href={props.url} target="_blank" rel="noreferrer noopener">
<span className="anchor_text">{props.text}</span>
</a>
</div>
);
} else return null;
};
const Member = ({ member, imageSize }) => {
const { github, twitter, name, crowdin, role, active } = member;
const avatarUrl = `https://avatars.githubusercontent.com/${github}`;
const twitterUrl = `https://twitter.com/${twitter}`;
const githubUrl = `https://github.com/${github}`;
const crowdinUrl = `https://crowdin.com/profile/${crowdin}`;
const size = imageSize || 100;
// to disable an member it has to be strictly false
if (!active && active === false) {
return null;
}
return (
<div className="member_media_object">
<div>
<h5>
<div>
{name}
</div>
<div className="team_role">
{role ? `${role}` : ''}
</div>
</h5>
</div>
<div className="member_avatar">
<img src={avatarUrl} height={size} width={size} alt="{{name}}" />
</div>
<div className="member_info">
<NetworkLink
iconAlt="github"
iconSource={`/svg/social/github.svg`}
size="16"
url={githubUrl}
text={github}
/>
<NetworkLink
iconAlt="twitter"
iconSource="/svg/social//twitter.svg"
size="16"
url={twitterUrl}
text={twitter}
/>
<NetworkLink
iconAlt="crowdin"
iconSource="/svg/social/crowdin.ico"
size="16"
url={crowdinUrl}
text={crowdin}
/>
</div>
</div>
);
};
const MemberSection = props => {
return (
<div className="member_section">
<h2 className="member_title">{props.title}</h2>
<div className="member_group">
{props.members.map(member => {
return <Member
key={member.github}
member={member}
imageSize={props.imageSize} />;
})}
</div>
</div>
);
};
const TranslatorMemberSections = props => {
return (
<div className="member_section">
<h4 className="language_title">{props.title}</h4>
<div>
<div>
<div className="member_group">
{props.translator.map(member => {
return <Member
key={member.crowdin}
member={member}
imageSize={60} />;
})}
</div>
</div>
</div>
</div>
);
};
const LanguagesGroups = props => {
const languages = Object.keys(props.languages);
return (
<div>
<h3 className="member_type translator_type">{props.title}</h3>
<div className="translator_group">
{languages.map((function(language) {
const lang = props.languages[language];
return <TranslatorMemberSections
key={language}
title={language}
translator={lang}/>;
}))}
</div>
</div>
);
};
const CrowdinTranslators = props => {
return (
<div className="translation_section">
<h2>
Crowdin Translators
</h2>
<div>
<LanguagesGroups languages={props.translators}/>
</div>
</div>
);
};
const BannerTitle = (props) => {
return (
<h1 className="header_title">
{props.title}
</h1>
);
};
class Team extends React.Component {
render() {
const {admons, maintainers, translators} = siteConfig.team;
return (
<div className="mainContainer">
<Container padding={['bottom']}>
<BannerTitle title={"Team Members"}/>
<div class="team_container">
<MemberSection title="Core" members={admons} imageSize={100}/>
<MemberSection title="Maintainers" members={maintainers} imageSize={80}/>
<CrowdinTranslators translators={translators} />
</div>
</Container>
</div>
);
}
}
module.exports = Team;