diff options
author | Fabio Berger <me@fabioberger.com> | 2017-11-22 04:03:08 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2017-11-22 04:03:08 +0800 |
commit | 3660ba28d73d70d08bf14c33ef680e5ef3ec7f3b (patch) | |
tree | f101656799da807489253e17bea7abfaea90b62d /packages/website/ts/pages/about/profile.tsx | |
parent | 037f466e1f80f635b48f3235258402e2ce75fb7b (diff) | |
download | dexon-0x-contracts-3660ba28d73d70d08bf14c33ef680e5ef3ec7f3b.tar dexon-0x-contracts-3660ba28d73d70d08bf14c33ef680e5ef3ec7f3b.tar.gz dexon-0x-contracts-3660ba28d73d70d08bf14c33ef680e5ef3ec7f3b.tar.bz2 dexon-0x-contracts-3660ba28d73d70d08bf14c33ef680e5ef3ec7f3b.tar.lz dexon-0x-contracts-3660ba28d73d70d08bf14c33ef680e5ef3ec7f3b.tar.xz dexon-0x-contracts-3660ba28d73d70d08bf14c33ef680e5ef3ec7f3b.tar.zst dexon-0x-contracts-3660ba28d73d70d08bf14c33ef680e5ef3ec7f3b.zip |
Add website to mono repo, update packages to align with existing sub-packages, use new subscribeAsync 0x.js method
Diffstat (limited to 'packages/website/ts/pages/about/profile.tsx')
-rw-r--r-- | packages/website/ts/pages/about/profile.tsx | 99 |
1 files changed, 99 insertions, 0 deletions
diff --git a/packages/website/ts/pages/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx new file mode 100644 index 000000000..6c48a8553 --- /dev/null +++ b/packages/website/ts/pages/about/profile.tsx @@ -0,0 +1,99 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import {colors} from 'material-ui/styles'; +import {utils} from 'ts/utils/utils'; +import {Element as ScrollElement} from 'react-scroll'; +import {Styles, 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 function Profile(props: ProfileProps) { + return ( + <div + className={`lg-col md-col lg-col-${props.colSize} md-col-6`} + > + <div + style={{maxWidth: 300}} + className="mx-auto lg-px3 md-px3 sm-px4 sm-pb3" + > + <div + className="circle overflow-hidden mx-auto" + style={styles.imageContainer} + > + <img + width={IMAGE_DIMENSION} + src={props.profileInfo.image} + /> + </div> + <div + className="center" + style={{fontSize: 18, fontWeight: 'bold', paddingTop: 20}} + > + {props.profileInfo.name} + </div> + {!_.isUndefined(props.profileInfo.title) && + <div + className="pt1 center" + style={{fontSize: 14, fontFamily: 'Roboto Mono', color: '#818181'}} + > + {props.profileInfo.title.toUpperCase()} + </div> + } + <div + style={{minHeight: 60, lineHeight: 1.4}} + className="pt1 pb2 mx-auto lg-h6 md-h6 sm-h5 sm-center" + > + {props.profileInfo.description} + </div> + <div className="flex pb3 mx-auto sm-hide xs-hide" style={{width: 180, opacity: 0.5}}> + {renderSocialMediaIcons(props.profileInfo)} + </div> + </div> + </div> + ); +} + +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 ( + <div key={url} className="pr1"> + <a + href={url} + style={{color: 'inherit'}} + target="_blank" + className="text-decoration-none" + > + <i className={`zmdi ${iconName}`} style={{...styles.socalIcon}} /> + </a> + </div> + ); +} |