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}
)}
);
};