openreplay/frontend/app/components/ui/SideMenuItem/SideMenuItem.tsx

import React from 'react';
import { Icon } from 'UI';
import cn from 'classnames';
import { IconNames } from 'UI/SVG';
import { Tooltip } from 'antd';
import stl from './sideMenuItem.module.css';

type Props = {
  title: string;
  iconName?: IconNames;
  iconBg?: boolean;
  iconColor?: string;
  iconSize?: number;
  className?: string;
  active?: boolean;
  disabled?: boolean;
  tooltipTitle?: string;
  onClick?: () => void;
  deleteHandler?: () => void;
  leading?: React.ReactNode;
  id?: string;
};

function SideMenuItem({
  iconBg = false,
  iconColor = 'gray-dark',
  iconSize = 18,
  className = '',
  iconName,
  title,
  active = false,
  disabled = false,
  tooltipTitle = '',
  onClick,
  deleteHandler,
  leading = null,
  ...props
}: Props) {
  const handleClick = () => {
    if (disabled) return;
    if (onClick) onClick();
  };

  const handleDeleteClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (deleteHandler) deleteHandler();
  };

  return (
    <Tooltip disabled={!disabled} title={tooltipTitle} placement="top">
      <div
        className={cn(
          className,
          stl.menuItem,
          'flex items-center py-2 justify-between shrink-0 cursor-pointer',
          { [stl.active]: active, [stl.disabled]: disabled },
        )}
        onClick={handleClick}
        {...props}
      >
        <div className={cn('flex items-center w-full', stl.iconLabel)}>
          {iconName && (
            <div className="flex items-center justify-center w-8 h-8 mr-2">
              {iconBg && (
                <div
                  className={cn(
                    'w-8 h-8 rounded-full relative opacity-20',
                    iconBg,
                  )}
                  style={{ opacity: 0.2 }}
                />
              )}
              <Icon
                name={iconName}
                size={iconSize}
                color={active ? 'teal' : iconColor}
                className="absolute"
              />
            </div>
          )}
          <span className={cn(stl.title, 'capitalize-first')}>{title}</span>
        </div>
        {leading && leading}
        {deleteHandler && (
          <div onClick={handleDeleteClick} className={stl.actions}>
            <Icon name="trash" size={14} />
          </div>
        )}
      </div>
    </Tooltip>
  );
}

export default SideMenuItem;