47 lines
1.4 KiB
JavaScript
47 lines
1.4 KiB
JavaScript
import React from 'react';
|
|
import cn from 'classnames';
|
|
import stl from './funnelMenuItem.module.css';
|
|
import { Icon, Tooltip } from 'UI';
|
|
|
|
function FunnelMenuItem({
|
|
iconName = 'info',
|
|
className,
|
|
title,
|
|
active = false,
|
|
disabled = false,
|
|
isPublic = false,
|
|
onClick,
|
|
}) {
|
|
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={`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;
|