overleaf/services/web/frontend/js/features/editor-left-menu/components/left-menu-button.tsx

import { PropsWithChildren } from 'react'
import Icon from '../../../shared/components/icon'

type Props = {
  onClick?: () => void
  icon: {
    type: string
    fw?: boolean
  }
  disabled?: boolean
  disabledAccesibilityText?: string
  type?: 'button' | 'link'
  href?: string
}

export default function LeftMenuButton({
  children,
  onClick,
  icon,
  disabled = false,
  disabledAccesibilityText,
  type = 'button',
  href,
}: PropsWithChildren<Props>) {
  if (disabled) {
    return (
      <div className="left-menu-button link-disabled">
        <Icon type={icon.type} fw={icon.fw} />
        <span>{children}</span>
        {disabledAccesibilityText ? (
          <span className="sr-only">{disabledAccesibilityText}</span>
        ) : null}
      </div>
    )
  }

  if (type === 'button') {
    return (
      <button onClick={onClick} className="left-menu-button">
        <Icon type={icon.type} fw={icon.fw} />
        <span>{children}</span>
      </button>
    )
  } else {
    return (
      <a
        href={href}
        target="_blank"
        rel="noreferrer"
        className="left-menu-button"
      >
        <Icon type={icon.type} fw={icon.fw} />
        <span>{children}</span>
      </a>
    )
  }
}