46 lines
922 B
JavaScript
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;
|