import { colors, Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { ProfileInfo } from 'ts/types'; const IMAGE_DIMENSION = 149; const styles: Styles = { subheader: { textTransform: 'uppercase', fontSize: 32, margin: 0, }, imageContainer: { width: IMAGE_DIMENSION, height: IMAGE_DIMENSION, boxShadow: 'rgba(0, 0, 0, 0.19) 2px 5px 10px', }, }; interface ProfileProps { colSize: number; profileInfo: ProfileInfo; } export const Profile = (props: ProfileProps) => { return (
{props.profileInfo.name}
{!_.isUndefined(props.profileInfo.title) && (
{props.profileInfo.title.toUpperCase()}
)}
{props.profileInfo.description}
{renderSocialMediaIcons(props.profileInfo)}
); }; function renderSocialMediaIcons(profileInfo: ProfileInfo): React.ReactNode { const icons = [ renderSocialMediaIcon('zmdi-github-box', profileInfo.github), renderSocialMediaIcon('zmdi-linkedin-box', profileInfo.linkedIn), renderSocialMediaIcon('zmdi-twitter-box', profileInfo.twitter), ]; return icons; } function renderSocialMediaIcon(iconName: string, url: string): React.ReactNode { if (_.isEmpty(url)) { return null; } return (
); }