import React from 'react' ; import { Callout , Text , H4 , Tooltip , Position } from '@blueprintjs/core' ; import { Row , Col } from 'react-flexbox-grid' ; import { useTranslation } from 'react-i18next' ; import { TFunction } from 'i18next' ; interface DeviceInfoCalloutProps { deviceType : string | undefined ; deviceIP : string | undefined ; deviceOS : string | undefined ; sharingSessionID : string | undefined ; deviceBrowser : string | undefined ; } function getContentOfTooltip ( t ) { return ( < > < Text > { t ( 'This should match with Device IP displayed on the screen of device that is trying to connect' ) } < /Text> < span style = { { fontWeight : 900 } } > < Text > { t ( 'If IP addresses dont match click Disconnect button' ) } < /Text> < /span> < />); } export default function DeviceInfoCallout ( props ) { const { t } = useTranslation ( ) ; const { deviceType , deviceIP , deviceOS , sharingSessionID , deviceBrowser , } = props ; return ( < > < H4 style = { { margin : '0 auto' , textAlign : 'center' } } > { `${ t ( 'Partner Device Info' ) }:` } < /H4> < Callout id = "device-info-callout" style = { { borderRadius : '8px' } } > < Row center = "xs" > < Col xs = { 12 } > < Text > { `${ t ( 'Device Type' ) }:` } < span > { deviceType } < /span> < /Text> < Tooltip content = { getContentOfTooltip ( t ) } position = { Position . TOP } > < div style = { { fontWeight : 900 , backgroundColor : '#00f99273' , paddingLeft : '10px' , paddingRight : '10px' , borderRadius : '20px' , } } > < Text className = "bp3-text-large" > { `${ t ( 'Device IP' ) }:` } { ' ' } < span className = "device-ip-span" > { deviceIP } < /span> < /Text> < /div> < /Tooltip> < Text > { `${ t ( 'Device Browser' ) }:` } < span > { deviceBrowser } < /span> < /Text> < Text > { `${ t ( 'Device OS' ) }:` } < span > { deviceOS } < /span> < /Text> < div style = { { width : '200px' , margin : '0 auto' } } > < Text className = "bp3-text-muted" ellipsize > { `${ t ( 'Session ID' ) }:` } < span > { sharingSessionID } < /span> < /Text> < /div> < /Col> < /Row> < /Callout> < />); }