63 lines
1.6 KiB
JavaScript
63 lines
1.6 KiB
JavaScript
import React from 'react';
|
|
import cn from 'classnames';
|
|
import { Icon, Tooltip } from 'UI';
|
|
import stl from './funnelMenuItem.module.css';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
function FunnelMenuItem({
|
|
iconName = 'info',
|
|
className,
|
|
title,
|
|
active = false,
|
|
disabled = false,
|
|
isPublic = false,
|
|
onClick,
|
|
}) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div
|
|
className={cn(
|
|
className,
|
|
stl.menuItem,
|
|
'flex items-center py-1 justify-between group',
|
|
{
|
|
[stl.active]: active,
|
|
},
|
|
)}
|
|
onClick={disabled ? null : onClick}
|
|
>
|
|
<div
|
|
className={cn(stl.iconLabel, 'flex items-center', {
|
|
[stl.disabled]: disabled,
|
|
})}
|
|
>
|
|
<div className="flex items-center justify-center w-8 h-8 flex-shrink-0">
|
|
<Icon
|
|
name={iconName}
|
|
size={16}
|
|
color="gray-dark"
|
|
className="absolute"
|
|
/>
|
|
</div>
|
|
<span className={cn(stl.title, 'cap-first')}>{title}</span>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<div className={cn('mx-2', { invisible: !isPublic })}>
|
|
<Tooltip title={t('Shared with team')}>
|
|
<div
|
|
className={cn(
|
|
'bg-gray-light h-8 w-8 rounded-full flex items-center justify-center',
|
|
stl.teamIcon,
|
|
)}
|
|
style={{ opacity: '0.3' }}
|
|
>
|
|
<Icon name="user-friends" color="gray-dark" size={16} />
|
|
</div>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default FunnelMenuItem;
|