import * as _ from 'lodash'; import * as React from 'react'; import { Container } from 'ts/components/ui/container'; import { Image } from 'ts/components/ui/image'; import { Text } from 'ts/components/ui/text'; import { colors } from 'ts/style/colors'; import { ScreenWidths } from 'ts/types'; export interface FeatureProps { screenWidth: ScreenWidths; } export const Features = (props: FeatureProps) => ( ); interface LinkInfo { displayText: string; linkSrc: string; } interface FeatureItemProps { imgSrc: string; title: string; description: string; linkInfos: LinkInfo[]; screenWidth: ScreenWidths; } const FeatureItem = (props: FeatureItemProps) => { const { imgSrc, title, description, linkInfos, screenWidth } = props; const isLargeScreen = screenWidth === ScreenWidths.Lg; const maxWidth = isLargeScreen ? '500px' : undefined; const image = ( ); const info = ( {title} {description} {_.map(linkInfos, linkInfo => { const onClick = (event: React.MouseEvent) => { window.open(linkInfo.linkSrc, '_blank'); }; return ( {linkInfo.displayText} ); })} ); return ( {isLargeScreen ? ( {image} {info} ) : ( {image} {info} )} ); };