import './space_card.scss' ; import { EuiCard , EuiLoadingSpinner } from '@elastic/eui' ; import React , { lazy , Suspense } from 'react' ; import type { Space } from '../../../common' ; import { addSpaceIdToPath , ENTER_SPACE_PATH } from '../../../common' ; import { getSpaceAvatarComponent } from '../../space_avatar' ; const LazySpaceAvatar = lazy ( ( ) => getSpaceAvatarComponent ( ) . then ( ( component ) => ( { default : component } ) ) ) ; interface Props { space : Space ; serverBasePath : string ; } export const SpaceCard = ( props ) => { const { serverBasePath , space } = props ; return ( < EuiCard className = "spaceCard" data - test - subj = { `space-card-${ space . id }` } icon = { renderSpaceAvatar ( space ) } title = { space . name } description = { renderSpaceDescription ( space ) } href = { addSpaceIdToPath ( serverBasePath , space . id , ENTER_SPACE_PATH ) } / > ) ; } ; function renderSpaceAvatar ( space ) { return ( < Suspense fallback = { < EuiLoadingSpinner / > } > < LazySpaceAvatar space = { space } size = { 'l' } announceSpaceName = { false } / > < /Suspense>); } function renderSpaceDescription ( space ) { let description = space . description || '' ; const needsTruncation = description . length > 120 ; if ( needsTruncation ) { description = description . substr ( 0 , 120 ) + '…' ; } return ( < span title = { description } className = "eui-textBreakWord euiTextColor--subdued" > { description } < /span>); }