mirror of
https://github.com/langgenius/dify.git
synced 2026-05-13 08:57:28 +08:00
45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import { cn } from '@langgenius/dify-ui/cn'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { Infotip } from '../../infotip'
|
|
|
|
export type LabelProps = {
|
|
htmlFor: string
|
|
label: string
|
|
isRequired?: boolean
|
|
showOptional?: boolean
|
|
tooltip?: string
|
|
className?: string
|
|
}
|
|
|
|
const Label = ({
|
|
htmlFor,
|
|
label,
|
|
isRequired,
|
|
showOptional,
|
|
tooltip,
|
|
className,
|
|
}: LabelProps) => {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<div className="flex h-6 items-center">
|
|
<label
|
|
data-testid="label"
|
|
htmlFor={htmlFor}
|
|
className={cn('system-sm-medium text-text-secondary', className)}
|
|
>
|
|
{label}
|
|
</label>
|
|
{!isRequired && showOptional && <div className="ml-1 system-xs-regular text-text-tertiary">{t('label.optional', { ns: 'common' })}</div>}
|
|
{isRequired && <div className="ml-1 system-xs-regular text-text-destructive-secondary">*</div>}
|
|
{tooltip && (
|
|
<Infotip aria-label={tooltip} className="ml-0.5 h-4 w-4" popupClassName="w-[200px]">
|
|
{tooltip}
|
|
</Infotip>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Label
|