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

58 lines
1.2 KiB
TypeScript
Raw Normal View History

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>
)
}
}