44 lines
1.4 KiB
JavaScript
44 lines
1.4 KiB
JavaScript
import React from 'react'
|
|
import cn from 'classnames'
|
|
import stl from './funnelMenuItem.module.css'
|
|
import { Icon, ItemMenu, Popup } 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 })}>
|
|
<Popup content={ `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>
|
|
</Popup>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default FunnelMenuItem
|