dify/web/app/components/workflow/variable-inspect/large-data-alert.tsx
Stephen Zhou a84c2d36a3
style: format with vp fmt (#38803)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2026-07-12 15:57:46 +00:00

39 lines
1.3 KiB
TypeScript

'use client'
import type { FC } from 'react'
import { cn } from '@langgenius/dify-ui/cn'
import { RiInformation2Fill } from '@remixicon/react'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
type Props = Readonly<{
textHasNoExport?: boolean
downloadUrl?: string
className?: string
}>
const LargeDataAlert: FC<Props> = ({ textHasNoExport, downloadUrl, className }) => {
const { t } = useTranslation()
const text = textHasNoExport
? t(($) => $['debug.variableInspect.largeDataNoExport'], { ns: 'workflow' })
: t(($) => $['debug.variableInspect.largeData'], { ns: 'workflow' })
return (
<div
className={cn(
'flex h-8 items-center justify-between rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur px-2 shadow-xs',
className,
)}
>
<div className="flex h-full w-0 grow items-center space-x-1">
<RiInformation2Fill className="size-4 shrink-0 text-text-accent" />
<div className="w-0 grow truncate system-xs-regular text-text-primary">{text}</div>
</div>
{downloadUrl && (
<div className="ml-1 shrink-0 cursor-pointer system-xs-medium-uppercase text-text-accent">
{t(($) => $['debug.variableInspect.export'], { ns: 'workflow' })}
</div>
)}
</div>
)
}
export default React.memo(LargeDataAlert)