import React from 'react' ; import { EuiCard , EuiFlexItem , EuiTitle , EuiTextColor } from '@elastic/eui' ; import { EuiCardTo } from '../../../shared/react_router_helpers' ; interface StatisticCardProps { title : string ; count ? : number ; actionPath ? : string ; } export const StatisticCard = ( { title , count = 0 , actionPath } ) => { const linkableCard = ( < EuiCardTo to = { actionPath || '' } layout = "horizontal" title = { title } titleSize = "xs" display = "plain" description = { < EuiTitle size = "l" > < EuiTextColor color = "default" > { count } < /EuiTextColor> < /EuiTitle>}/ > ) ; const card = ( < EuiCard layout = "horizontal" title = { title } titleSize = "xs" display = "plain" description = { < EuiTitle size = "l" > < EuiTextColor color = "subdued" > { count } < /EuiTextColor> < /EuiTitle>}/ > ) ; return < EuiFlexItem > { actionPath ? linkableCard : card } < /EuiFlexItem>; } ;