60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import { type ComponentProps } from 'react'
|
|
import { cn } from '@/lib'
|
|
import logoColor from '@/assets/imarketkorea-logo.png'
|
|
import logoWhite from '@/assets/imarketkorea-logo-white.png'
|
|
|
|
export type LogoVariant = 'color' | 'white'
|
|
export type LogoSize = 'sm' | 'md' | 'lg'
|
|
|
|
const sources: Record<LogoVariant, string> = {
|
|
color: logoColor,
|
|
white: logoWhite,
|
|
}
|
|
|
|
const sizes: Record<LogoSize, { img: string; text: string; gap: string }> = {
|
|
sm: { img: 'h-6', text: 'text-base', gap: 'gap-1.5' },
|
|
md: { img: 'h-8', text: 'text-xl', gap: 'gap-2' },
|
|
lg: { img: 'h-10', text: 'text-2xl', gap: 'gap-2.5' },
|
|
}
|
|
|
|
export interface LogoProps extends Omit<ComponentProps<'div'>, 'children'> {
|
|
variant?: LogoVariant
|
|
size?: LogoSize
|
|
withText?: boolean
|
|
alt?: string
|
|
/** 회사 브랜딩 오버라이드(companies.settings.branding). 없으면 기본 iMarket Korea. */
|
|
serviceName?: string
|
|
logoUrl?: string
|
|
}
|
|
|
|
export function Logo({
|
|
variant = 'color',
|
|
size = 'md',
|
|
withText = true,
|
|
alt = 'iMarket Korea',
|
|
serviceName,
|
|
logoUrl,
|
|
className,
|
|
...props
|
|
}: LogoProps) {
|
|
const s = sizes[size]
|
|
const name = serviceName || 'iMarket Korea'
|
|
|
|
return (
|
|
<div className={cn('flex items-center', s.gap, className)} {...props}>
|
|
<img
|
|
src={logoUrl || sources[variant]}
|
|
alt={withText ? '' : (serviceName || alt)}
|
|
className={cn('w-auto select-none', s.img)}
|
|
/>
|
|
{withText && (
|
|
<span className={cn('font-bold tracking-[-0.4px] text-foreground', s.text)}>
|
|
{name}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Logo
|