import React from 'react' ; import { startCase } from 'lodash' ; import { EuiFlexGroup , EuiFlexItem , EuiSpacer , EuiText , EuiTitle , EuiTextColor , } from '@elastic/eui' ; import { SourceIcon } from '../../../../components/shared/source_icon' ; interface AddSourceHeaderProps { name : string ; serviceType : string ; categories : string [ ] ; } export const AddSourceHeader = ( { name , serviceType , categories , } ) => { return ( < > < EuiSpacer size = "s" / > < EuiFlexGroup alignItems = "flexStart" justifyContent = "center" gutterSize = "m" responsive = { false } > < EuiFlexItem grow = { false } > < SourceIcon serviceType = { serviceType } name = { name } className = "adding-a-source__icon" size = "xxl" / > < /EuiFlexItem> < EuiFlexItem > < EuiTitle size = "s" > < h1 > < EuiTextColor color = "default" > { name } < /EuiTextColor> < /h1> < /EuiTitle> < EuiText size = "xs" color = "subdued" > { categories . map ( ( category ) => startCase ( category ) ) . join ( ', ' ) } < /EuiText> < /EuiFlexItem> < /EuiFlexGroup> < />); } ;