mirror of
https://github.com/langgenius/dify.git
synced 2026-07-21 18:58:35 +08:00
51 lines
1.8 KiB
TypeScript
51 lines
1.8 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 = Readonly<{
|
|
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 }),
|
|
)}
|
|
></div>
|
|
<div className="flex size-6 items-center justify-center">
|
|
<span className="i-ri-information-2-fill text-text-accent" />
|
|
</div>
|
|
<div className="p-1">
|
|
<div className="system-xs-regular text-text-secondary">{message}</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
aria-label={t(($) => $['operation.close'], { ns: 'common' })}
|
|
className="pointer-events-auto flex size-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 size-4 text-text-tertiary" aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default memo(Alert)
|