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

46 lines
922 B
JavaScript

// @flow
import { makeStyles } from '@material-ui/core/styles';
import React from 'react';
type Props = {
/**
* The name to be displayed within the badge.
*/
name: string
}
const useStyles = makeStyles(theme => {
return {
badge: {
background: 'rgba(0, 0, 0, 0.6)',
borderRadius: '3px',
color: theme.palette.text01,
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 = ({ name }: Props) => {
const classes = useStyles();
return (
<div className = { classes.badge }>
{name}
</div>
);
};
export default DisplayNameBadge;