dify/web/app/components/base/logo/dify-logo.tsx
NFish 57ece83c30
Fix/branding broken (#20375)
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
2025-05-28 20:06:58 +08:00

45 lines
1.0 KiB
TypeScript

'use client'
import type { FC } from 'react'
import classNames from '@/utils/classnames'
import useTheme from '@/hooks/use-theme'
import { basePath } from '@/utils/var'
export type LogoStyle = 'default' | 'monochromeWhite'
export const logoPathMap: Record<LogoStyle, string> = {
default: '/logo/logo.svg',
monochromeWhite: '/logo/logo-monochrome-white.svg',
}
export type LogoSize = 'large' | 'medium' | 'small'
export const logoSizeMap: Record<LogoSize, string> = {
large: 'w-16 h-7',
medium: 'w-12 h-[22px]',
small: 'w-9 h-4',
}
type DifyLogoProps = {
style?: LogoStyle
size?: LogoSize
className?: string
}
const DifyLogo: FC<DifyLogoProps> = ({
style = 'default',
size = 'medium',
className,
}) => {
const { theme } = useTheme()
const themedStyle = (theme === 'dark' && style === 'default') ? 'monochromeWhite' : style
return (
<img
src={`${basePath}${logoPathMap[themedStyle]}`}
className={classNames('block object-contain', logoSizeMap[size], className)}
alt='Dify logo'
/>
)
}
export default DifyLogo