jiti-meet/react/features/invite/components/add-people-dialog/web/DialInLimit.tsx

58 lines
1.8 KiB
TypeScript
Raw Normal View History

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 { withPixelLineHeight } from '../../../../base/styles/functions.web';
import { UPGRADE_OPTIONS_LINK, UPGRADE_OPTIONS_TEXT } from '../../../constants';
const useStyles = makeStyles()((theme: Theme) => {
return {
limitContainer: {
backgroundColor: theme.palette.warning01,
borderRadius: '6px',
padding: '8px 16px'
},
limitInfo: {
color: theme.palette.field01,
...withPixelLineHeight(theme.typography.bodyShortRegular)
},
link: {
color: theme.palette.field01,
fontWeight: 'bold',
textDecoration: 'underline'
}
};
});
/**
* Component that displays a message when the dial in limit is reached.
* * @param {Function} t - Function which translate strings.
*
* @returns {ReactElement}
*/
const DialInLimit: React.FC<WithTranslation> = ({ t }) => {
const { classes } = useStyles();
return (
<div className = { classes.limitContainer }>
<span className = { classes.limitInfo }>
<b>{ `${t('info.dialInNumber')} ` }</b>
{ `${t('info.reachedLimit')} `}
{ `${t('info.upgradeOptions')} ` }
<a
className = { classes.link }
href = { UPGRADE_OPTIONS_LINK }
rel = 'noopener noreferrer'
target = '_blank'>
{ `${UPGRADE_OPTIONS_TEXT}` }
</a>
.
</span>
</div>
);
};
export default translate(DialInLimit);