zcash-grant-system/frontend/client/components/CreateFlow/TeamMember.tsx

53 lines
1.6 KiB
TypeScript

import React from 'react';
import classnames from 'classnames';
import { Icon } from 'antd';
import { SOCIAL_INFO } from 'utils/social';
import { User } from 'types';
import UserAvatar from 'components/UserAvatar';
import './TeamMember.less';
interface Props {
user: User;
}
export default class CreateFlowTeamMember extends React.PureComponent<Props> {
render() {
const { user } = this.props;
return (
<div className="TeamMember">
<div className="TeamMember-avatar">
<UserAvatar className="TeamMember-avatar-img" user={user} />
</div>
<div className="TeamMember-info">
<div className="TeamMember-info-name">
{user.displayName || <em>No name</em>}
</div>
<div className="TeamMember-info-title">{user.title || <em>No title</em>}</div>
<div className="TeamMember-info-social">
{Object.values(SOCIAL_INFO).map(s => {
const account = user.socialMedias.find(sm => s.service === sm.service);
const cn = classnames(
'TeamMember-info-social-icon',
account && 'is-active',
);
return (
<div key={s.name} className={cn}>
{s.icon}
{account && (
<Icon
className="TeamMember-info-social-icon-check"
type="check-circle"
theme="filled"
/>
)}
</div>
);
})}
</div>
</div>
</div>
);
}
}