71 lines
1.7 KiB
TypeScript
71 lines
1.7 KiB
TypeScript
import { cn } from '@/lib/utils'
|
|
import { resolveNoteIcon } from '../utils/noteIcon'
|
|
|
|
interface NoteTitleIconProps {
|
|
icon: string | null | undefined
|
|
size?: number
|
|
className?: string
|
|
color?: string
|
|
testId?: string
|
|
}
|
|
|
|
function IconWrapper({
|
|
children,
|
|
className,
|
|
size,
|
|
}: Pick<NoteTitleIconProps, 'className' | 'size'> & { children: React.ReactNode }) {
|
|
return (
|
|
<span
|
|
className={cn('inline-flex shrink-0 items-center justify-center align-middle', className)}
|
|
style={{ width: size, height: size, lineHeight: 1 }}
|
|
>
|
|
{children}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
export function NoteTitleIcon({ icon, size = 14, className, color, testId }: NoteTitleIconProps) {
|
|
const resolved = resolveNoteIcon(icon)
|
|
|
|
if (resolved.kind === 'none') return null
|
|
|
|
if (resolved.kind === 'emoji') {
|
|
return (
|
|
<IconWrapper className={className} size={size}>
|
|
<span style={{ fontSize: size, lineHeight: 1 }} data-testid={testId}>
|
|
{resolved.value}
|
|
</span>
|
|
</IconWrapper>
|
|
)
|
|
}
|
|
|
|
if (resolved.kind === 'image') {
|
|
return (
|
|
<IconWrapper className={className} size={size}>
|
|
<img
|
|
src={resolved.src}
|
|
alt=""
|
|
aria-hidden="true"
|
|
className="block h-full w-full rounded-sm object-cover"
|
|
onError={(event) => {
|
|
event.currentTarget.style.display = 'none'
|
|
}}
|
|
data-testid={testId}
|
|
/>
|
|
</IconWrapper>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<IconWrapper className={className} size={size}>
|
|
<resolved.Icon
|
|
width={size}
|
|
height={size}
|
|
className="block"
|
|
style={color ? { color } : undefined}
|
|
data-testid={testId}
|
|
/>
|
|
</IconWrapper>
|
|
)
|
|
}
|