dify/web/app/components/plugins/base/badges/icon-with-tooltip.tsx
Joel 7709d9df20
Chore: frontend infrastructure upgrade (#16420)
Co-authored-by: NFish <douxc512@gmail.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: jZonG <jzongcode@gmail.com>
2025-03-21 17:41:03 +08:00

38 lines
1008 B
TypeScript

import React, { type FC } from 'react'
import cn from '@/utils/classnames'
import Tooltip from '@/app/components/base/tooltip'
import { Theme } from '@/types/app'
type IconWithTooltipProps = {
className?: string
popupContent?: string
theme: Theme
BadgeIconLight: React.ElementType
BadgeIconDark: React.ElementType
}
const IconWithTooltip: FC<IconWithTooltipProps> = ({
className,
theme,
popupContent,
BadgeIconLight,
BadgeIconDark,
}) => {
const isDark = theme === Theme.dark
const iconClassName = cn('h-5 w-5', className)
const Icon = isDark ? BadgeIconDark : BadgeIconLight
return (
<Tooltip
popupClassName='p-1.5 border-[0.5px] border-[0.5px] border-components-panel-border bg-components-tooltip-bg text-text-secondary system-xs-medium'
popupContent={popupContent}
>
<div className='flex shrink-0 items-center justify-center'>
<Icon className={iconClassName} />
</div>
</Tooltip>
)
}
export default React.memo(IconWithTooltip)