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 { ActionLink, ActionLinkProps } from 'ts/pages/instant/action_link'; import { colors } from 'ts/style/colors'; import { ScreenWidths, WebsitePaths } from 'ts/types'; export interface FeatureProps { screenWidth: ScreenWidths; onGetStartedClick: () => void; } export const Features = (props: FeatureProps) => { const isSmallScreen = props.screenWidth === ScreenWidths.Sm; const getStartedLinkInfo = { displayText: 'Get started', onClick: props.onGetStartedClick, }; const exploreTheDocsLinkInfo = { displayText: 'Explore the docs', linkSrc: `${WebsitePaths.Wiki}#Get-Started-With-Instant`, }; const tokenLinkInfos = isSmallScreen ? [getStartedLinkInfo] : [getStartedLinkInfo, exploreTheDocsLinkInfo]; return ( ); }; interface FeatureItemProps { imgSrc: string; title: string; description: string; linkInfos: ActionLinkProps[]; 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 => ( ))} ); return ( {isLargeScreen ? ( {image} {info} ) : ( {image} {info} )} ); };