mirror of
https://github.com/yu-i-i/overleaf-cep.git
synced 2026-11-14 14:13:43 +01:00
Rebeka Dekany
e2a8bf768b
* Merge intermediate component wrappers into OL-prefixed components * Replace all intermediate wrapper consumers with OL-prefixed components directly * Fix jsx/js files still importing deleted shim components * Remove duplicate OLNotification imports left by first pass * Rename OLTagIcon to TagIcon, remove OL prefix * Rename OLDropdownMenuItem to DropdownMenuItem, remove OL prefix * Remove OLNotification, use Notification directly * Move Notification to the main shared component folder * Update tag-icon import path out of ol/ * Move TagIcon to the main shared component folder * Update dropdown-menu-item import path out of ol/ * Move DropdownMenuItem to the main shared component folder * Fix dropdown-menu-item import path to dropdown/ subfolder * Remove BS5 alias prefixes from shared components * Restore notification-list wrapper in Notification component * Add translation for loading button * Remove redundant import aliasing * Resolve conflicts * Restore notification container `notification-list` GitOrigin-RevId: 24a5af18599a3e02ac6fd61c09cf5a49ef6e0020
76 lines
1.6 KiB
TypeScript
76 lines
1.6 KiB
TypeScript
import React from 'react'
|
|
import classnames from 'classnames'
|
|
import type { ConnectionStatus } from './types'
|
|
import { Badge, Button } from 'react-bootstrap'
|
|
import Notification from '@/shared/components/notification'
|
|
import MaterialIcon from '@/shared/components/material-icon'
|
|
|
|
const variants = {
|
|
connected: 'success',
|
|
connecting: 'warning',
|
|
disconnected: 'danger',
|
|
}
|
|
|
|
export const ConnectionBadge = ({ state }: { state: ConnectionStatus }) => (
|
|
<Badge className="px-2 py-1" bg={variants[state]}>
|
|
{state}
|
|
</Badge>
|
|
)
|
|
|
|
export const DiagnosticItem = ({
|
|
icon,
|
|
label,
|
|
value,
|
|
type,
|
|
}: {
|
|
icon: string
|
|
label: string
|
|
value: React.ReactNode
|
|
type?: 'success' | 'danger'
|
|
}) => (
|
|
<div
|
|
className={classnames(
|
|
'py-2',
|
|
type === 'success' && 'text-success',
|
|
type === 'danger' && 'text-danger'
|
|
)}
|
|
>
|
|
<div className="d-flex gap-2 fw-bold align-items-center">
|
|
<MaterialIcon type={icon} />
|
|
<span>{label}</span>
|
|
</div>
|
|
<div>{value}</div>
|
|
</div>
|
|
)
|
|
|
|
export function ErrorAlert({ message }: { message: string }) {
|
|
return (
|
|
<div className="notification-list">
|
|
<Notification type="error" content={message} className="mt-3" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function ActionButton({
|
|
label,
|
|
icon,
|
|
onClick,
|
|
disabled,
|
|
}: {
|
|
label: string
|
|
icon: string
|
|
onClick: () => void
|
|
disabled?: boolean
|
|
}) {
|
|
return (
|
|
<Button
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
className="d-flex align-items-center"
|
|
>
|
|
<MaterialIcon className="me-2" type={icon} />
|
|
<span>{label}</span>
|
|
</Button>
|
|
)
|
|
}
|