openreplay/frontend/app/components/ui/TextLabel/TextLabel.js
2022-11-14 18:14:13 +01:00

38 lines
953 B
JavaScript

import React from 'react';
import cn from 'classnames';
import { Icon, Tooltip } from 'UI';
import styles from './textLabel.module.css';
export default function TextLabel({
icon,
label,
minWidth = 0,
maxWidth = false,
popupLabel = false,
textTransform = '',
color = 'gray-medium',
iconColor = color,
}) {
return (
<div
className={cn('flex items-center', styles.sessionLabel)}
style={{ minWidth: `${minWidth}` }}
>
<Icon name={icon} size="16" color={iconColor} />
{popupLabel ? (
<Tooltip title={popupLabel}>
<div style={{ maxWidth: `${maxWidth}px` }} className={textTransform}>
{label}
</div>
</Tooltip>
) : (
<div
style={{ maxWidth: `${maxWidth}px`, lineHeight: '16px' }}
className={cn(`color-${color}`, textTransform)} // textTransform by tailwind
>
{label}
</div>
)}
</div>
);
}