import React from 'react' ; import { DefaultButton , PrimaryButton , Stack , Link , Text } from '@fluentui/react' ; import { Video20Filled } from '@fluentui/react-icons' ; import { endCallContainerStyle , endCallTitleStyle , buttonStyle , buttonWithIconStyles , mainStackTokens , buttonsStackTokens , upperStackTokens , videoCameraIconStyle , bottomStackFooterStyle } from '../styles/EndCall.styles' ; export interface EndCallProps { rejoinHandler ( ) : void ; homeHandler ( ) : void ; } export const EndCall = ( props ) : JSX . Element => { const leftCall = 'You left the call' ; const goHomePage = 'Go to homepage' ; const rejoinCall = 'Rejoin call' ; const feedbackLink = 'https://docs.microsoft.com/answers/search.html?c=&includeChildren=&f=&type=question+OR+idea+OR+kbentry+OR+answer+OR+topic+OR+user&redirect=search%2Fsearch&sort=relevance&q=azure-communication-services' ; return ( < Stack horizontal wrap horizontalAlign = "center" verticalAlign = "center" tokens = { mainStackTokens } className = { endCallContainerStyle } > < Stack tokens = { upperStackTokens } > < Text role = { 'heading' } aria - level = { 1 } className = { endCallTitleStyle } > { leftCall } < /Text> < Stack horizontal wrap tokens = { buttonsStackTokens } > < PrimaryButton className = { buttonStyle } styles = { buttonWithIconStyles } text = { rejoinCall } onClick = { props . rejoinHandler } onRenderIcon = { ( ) => < Video20Filled className = { videoCameraIconStyle } />}/ > < DefaultButton className = { buttonStyle } styles = { buttonWithIconStyles } text = { goHomePage } onClick = { props . homeHandler } / > < /Stack> < div className = { bottomStackFooterStyle } > < Link href = { feedbackLink } > Give Feedback < /Link>&nbsp;on this sample app at Microsoft Q&amp;A < /div> < /Stack> < /Stack>); } ;