mirror of
https://github.com/langgenius/dify.git
synced 2026-05-13 06:03:15 -04:00
61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
import { cn } from '@langgenius/dify-ui/cn'
|
|
import { cva } from 'class-variance-authority'
|
|
import {
|
|
memo,
|
|
} from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
type Props = {
|
|
type?: 'info'
|
|
message: string
|
|
onHide: () => void
|
|
className?: string
|
|
}
|
|
const bgVariants = cva(
|
|
'',
|
|
{
|
|
variants: {
|
|
type: {
|
|
info: 'from-components-badge-status-light-normal-halo to-background-gradient-mask-transparent',
|
|
},
|
|
},
|
|
},
|
|
)
|
|
const Alert: React.FC<Props> = ({
|
|
type = 'info',
|
|
message,
|
|
onHide,
|
|
className,
|
|
}) => {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<div className={cn('pointer-events-none w-full', className)}>
|
|
<div
|
|
className="relative flex space-x-1 overflow-hidden rounded-xl border border-components-panel-border bg-components-panel-bg-blur p-3 shadow-lg"
|
|
>
|
|
<div className={cn('pointer-events-none absolute inset-0 bg-linear-to-r opacity-[0.4]', bgVariants({ type }))} data-testid="alert-gradient">
|
|
</div>
|
|
<div className="flex h-6 w-6 items-center justify-center">
|
|
<span className="i-ri-information-2-fill text-text-accent" data-testid="info-icon" />
|
|
</div>
|
|
<div className="p-1">
|
|
<div className="system-xs-regular text-text-secondary" data-testid="msg-container">
|
|
{message}
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
aria-label={t('operation.close', { ns: 'common' })}
|
|
className="pointer-events-auto flex h-6 w-6 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-components-button-secondary-accent-border"
|
|
onClick={onHide}
|
|
>
|
|
<span className="i-ri-close-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default memo(Alert)
|