diff options
| -rw-r--r-- | packages/website/ts/pages/jobs/bulleted_item_list.tsx | 30 | ||||
| -rw-r--r-- | packages/website/ts/pages/jobs/values.tsx | 27 |
2 files changed, 33 insertions, 24 deletions
diff --git a/packages/website/ts/pages/jobs/bulleted_item_list.tsx b/packages/website/ts/pages/jobs/bulleted_item_list.tsx new file mode 100644 index 000000000..108f31e00 --- /dev/null +++ b/packages/website/ts/pages/jobs/bulleted_item_list.tsx @@ -0,0 +1,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 interface BulletedItemListProps { + headerText: string; + bulletedItems: BulletedItemProps[]; +} +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> + <div className="px2"> + {_.map(props.bulletedItems, bulletedItemProps => { + return ( + <BulletedItem + bulletColor={bulletedItemProps.bulletColor} + title={bulletedItemProps.title} + description={bulletedItemProps.description} + /> + ); + })} + </div> + </div> + ); +}; diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx index 9bb98d016..37e62d23b 100644 --- a/packages/website/ts/pages/jobs/values.tsx +++ b/packages/website/ts/pages/jobs/values.tsx @@ -2,7 +2,8 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item'; +import { BulletedItemProps } from 'ts/pages/jobs/bulleted_item'; +import { BulletedItemList } from 'ts/pages/jobs/bulleted_item_list'; const BULLETED_ITEMS: BulletedItemProps[] = [ { @@ -22,26 +23,4 @@ const BULLETED_ITEMS: BulletedItemProps[] = [ }, ]; -export const Values = () => { - const isSmallScreen = false; - return ( - <div className="clearfix" style={{ backgroundColor: colors.white }}> - <div className="mx-auto max-width-4 clearfix"> - <div className="h2 lg-py4 md-py4 sm-py3" style={{ paddingLeft: 90, fontFamily: 'Roboto Mono' }}> - Our Values - </div> - <div className="col col-12 px2"> - {_.map(BULLETED_ITEMS, bulletedItemProps => { - return ( - <BulletedItem - bulletColor={bulletedItemProps.bulletColor} - title={bulletedItemProps.title} - description={bulletedItemProps.description} - /> - ); - })} - </div> - </div> - </div> - ); -}; +export const Values = () => <BulletedItemList headerText="Our Values" bulletedItems={BULLETED_ITEMS} />; |