theluyuan
38ba663466
Some checks failed
Close stale issues and PRs / stale (push) Has been cancelled
79 lines
2.0 KiB
TypeScript
79 lines
2.0 KiB
TypeScript
import { Theme } from '@mui/material';
|
|
import React from 'react';
|
|
import { WithTranslation } from 'react-i18next';
|
|
import { makeStyles } from 'tss-react/mui';
|
|
|
|
import { translate } from '../../../../base/i18n/functions';
|
|
import { _formatConferenceIDPin } from '../../../_utils';
|
|
|
|
|
|
interface IProps extends WithTranslation {
|
|
|
|
/**
|
|
* The conference id.
|
|
*/
|
|
conferenceID?: string | number;
|
|
|
|
/**
|
|
* The conference name.
|
|
*/
|
|
conferenceName: string;
|
|
}
|
|
|
|
const useStyles = makeStyles()((theme: Theme) => {
|
|
return {
|
|
container: {
|
|
marginTop: 32,
|
|
maxWidth: 310,
|
|
padding: '16px 12px',
|
|
background: theme.palette.ui02,
|
|
textAlign: 'center',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
borderRadius: 6,
|
|
|
|
'& *': {
|
|
userSelect: 'text'
|
|
}
|
|
},
|
|
confNameLabel: {
|
|
...theme.typography.heading6,
|
|
marginBottom: 18,
|
|
whiteSpace: 'nowrap',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis'
|
|
},
|
|
descriptionLabel: {
|
|
...theme.typography.bodyShortRegularLarge,
|
|
marginBottom: 18
|
|
},
|
|
separator: {
|
|
width: '100%',
|
|
height: 1,
|
|
background: theme.palette.ui04,
|
|
marginBottom: 18
|
|
},
|
|
pinLabel: {
|
|
...theme.typography.heading6
|
|
}
|
|
};
|
|
});
|
|
|
|
const ConferenceID: React.FC<IProps> = ({ conferenceID, t }) => {
|
|
const { classes: styles } = useStyles();
|
|
|
|
return (
|
|
<div className = { styles.container }>
|
|
<div className = { styles.descriptionLabel }>
|
|
{ t('info.dialANumber') }
|
|
</div>
|
|
<div className = { styles.separator } />
|
|
<div className = { styles.pinLabel }>
|
|
{ `${t('info.dialInConferenceID')} ${_formatConferenceIDPin(conferenceID ?? '')}` }
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default translate(ConferenceID);
|