jiti-meet/react/features/display-name/components/web/DisplayNameBadge.tsx

39 lines
902 B
TypeScript
Raw Normal View History

2022-09-13 07:36:00 +00:00
import { Theme } from '@mui/material';
2021-07-20 08:37:52 +00:00
import React from 'react';
2022-09-13 07:36:00 +00:00
import { makeStyles } from 'tss-react/mui';
2021-07-20 08:37:52 +00:00
2022-09-13 07:36:00 +00:00
const useStyles = makeStyles()((theme: Theme) => {
const { text01 } = theme.palette;
2021-07-20 08:37:52 +00:00
return {
badge: {
background: 'rgba(0, 0, 0, 0.6)',
borderRadius: '3px',
color: text01,
2021-07-20 08:37:52 +00:00
maxWidth: '50%',
overflow: 'hidden',
padding: '2px 16px',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
}
};
});
/**
* Component that displays a name badge.
*
* @param {Props} props - The props of the component.
* @returns {ReactElement}
*/
const DisplayNameBadge: React.FC<{ name: string; }> = ({ name }) => {
2022-09-13 07:36:00 +00:00
const { classes } = useStyles();
2021-07-20 08:37:52 +00:00
return (
<div className = { classes.badge }>
{ name }
2021-07-20 08:37:52 +00:00
</div>
);
};
export default DisplayNameBadge;