diff options
Diffstat (limited to 'packages/website/ts/pages/jobs/bulleted_item_list.tsx')
-rw-r--r-- | packages/website/ts/pages/jobs/bulleted_item_list.tsx | 47 |
1 files changed, 39 insertions, 8 deletions
diff --git a/packages/website/ts/pages/jobs/bulleted_item_list.tsx b/packages/website/ts/pages/jobs/bulleted_item_list.tsx index 30dd126d1..a00290418 100644 --- a/packages/website/ts/pages/jobs/bulleted_item_list.tsx +++ b/packages/website/ts/pages/jobs/bulleted_item_list.tsx @@ -2,20 +2,30 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item'; - +export type BulletedItemInfo = BulletedItemProps; export interface BulletedItemListProps { - headerText: string; - bulletedItems: BulletedItemProps[]; + headerText?: string; + bulletedItemInfos: BulletedItemInfo[]; } export const BulletedItemList = (props: BulletedItemListProps) => { return ( <div className="mx-auto max-width-4"> - <div className="h2 lg-py4 md-py4 sm-py3" style={{ paddingLeft: 90, fontFamily: 'Roboto Mono' }}> - {props.headerText} - </div> + {!_.isUndefined(props.headerText) && ( + <div + className="h2 lg-py4 md-py4 sm-py3" + style={{ + paddingLeft: 90, + fontFamily: 'Roboto Mono', + minHeight: '1.25em', + lineHeight: 1.25, + }} + > + {props.headerText} + </div> + )} + <div className="px2"> - {_.map(props.bulletedItems, bulletedItemProps => { + {_.map(props.bulletedItemInfos, bulletedItemProps => { return ( <BulletedItem key={bulletedItemProps.title} @@ -29,3 +39,24 @@ export const BulletedItemList = (props: BulletedItemListProps) => { </div> ); }; + +interface BulletedItemProps { + bulletColor: string; + title: string; + description: string; + height?: number; +} +const BulletedItem = (props: BulletedItemProps) => { + const minHeight = props.height || 150; + return ( + <div className="flex" style={{ minHeight }}> + <svg className="flex-none px2" height="26" width="26"> + <circle cx="13" cy="13" r="13" fill={props.bulletColor} /> + </svg> + <div className="flex-auto px2"> + <div style={{ paddingTop: 3, fontWeight: 'bold', fontSize: 16 }}>{props.title}</div> + <div style={{ paddingTop: 12, fontSize: 16, lineHeight: 2 }}>{props.description}</div> + </div> + </div> + ); +}; |