import React from 'react' ; import { EuiFlexGroup , EuiFlexItem , EuiIcon , EuiPageContentBody , EuiSpacer , EuiText , EuiTitle , IconType , } from '@elastic/eui' ; interface Props { title : string ; subtitle : string ; iconType ? : IconType ; } export const AnalyticsSection = ( { title , subtitle , iconType , children } ) => ( < section > < header > < EuiFlexGroup gutterSize = "xs" alignItems = "center" justifyContent = "flexStart" responsive = { false } > { iconType && ( < EuiFlexItem grow = { false } > < EuiIcon type = { iconType } size = "l" / > < /EuiFlexItem>)} < EuiFlexItem > < EuiTitle size = "s" > < h2 > { title } < /h2> < /EuiTitle> < /EuiFlexItem> < /EuiFlexGroup> < EuiSpacer size = "xs" / > < EuiText size = "s" color = "subdued" > < p > { subtitle } < /p> < /EuiText> < /header> < EuiSpacer size = "m" / > < EuiPageContentBody > { children } < /EuiPageContentBody> < /section>);