import * as _ from 'lodash'; import * as React from 'react'; import {ProfileInfo, Styles} from 'ts/types'; import {colors} from 'ts/utils/colors'; 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 function 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) { 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) { if (_.isEmpty(url)) { return null; } return (
); }