overleaf/services/web/frontend/js/features/ui/components/ol/ol-notification.tsx
Rebeka Dekany 5b6bbcb73c Merge pull request #21008 from overleaf/rd-editor-errors
[web] Migrate notifications and error boundaries on the editor page

GitOrigin-RevId: c195ecf0dd9e38ec8326c823174e559e1f192ce1
2024-10-14 11:09:36 +00:00

43 lines
1.2 KiB
TypeScript

import Notification from '@/shared/components/notification'
import { Alert, AlertProps } from 'react-bootstrap'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
import classnames from 'classnames'
type OLNotificationProps = React.ComponentProps<typeof Notification> & {
bs3Props?: {
icon?: React.ReactElement
className?: string
}
}
function OLNotification(props: OLNotificationProps) {
const { bs3Props, ...notificationProps } = props
const alertProps = {
// Map `error` to `danger`
bsStyle:
notificationProps.type === 'error' ? 'danger' : notificationProps.type,
className: classnames(notificationProps.className, bs3Props?.className),
onDismiss: notificationProps.onDismiss,
} as const satisfies AlertProps
return (
<BootstrapVersionSwitcher
bs3={
<Alert {...alertProps}>
{bs3Props?.icon}
{bs3Props?.icon && ' '}
{notificationProps.content}
{notificationProps.action}
</Alert>
}
bs5={
<div className="notification-list">
<Notification {...notificationProps} />
</div>
}
/>
)
}
export default OLNotification