dify/web/app/components/datasets/metadata/edit-metadata-batch/input-has-set-multiple-value.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

36 lines
1.2 KiB
TypeScript

'use client'
import type { FC } from 'react'
import { cn } from '@langgenius/dify-ui/cn'
import { RiCloseLine } from '@remixicon/react'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
type Props = Readonly<{
onClear: () => void
readOnly?: boolean
}>
const InputHasSetMultipleValue: FC<Props> = ({ onClear, readOnly }) => {
const { t } = useTranslation()
return (
<div className="h-6 grow rounded-md bg-components-input-bg-normal p-0.5 text-[0]">
<div
className={cn(
'inline-flex h-5 items-center space-x-0.5 rounded-[5px] border-[0.5px] border-components-panel-border bg-components-badge-white-to-dark pr-0.5 pl-1.5 shadow-xs',
readOnly && 'pr-1.5',
)}
>
<div className="system-xs-regular text-text-secondary">
{t(($) => $['metadata.batchEditMetadata.multipleValue'], { ns: 'dataset' })}
</div>
{!readOnly && (
<div className="cursor-pointer rounded-sm p-px text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary">
<RiCloseLine className="size-3.5" onClick={onClear} />
</div>
)}
</div>
</div>
)
}
export default React.memo(InputHasSetMultipleValue)