You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
1.1 KiB
46 lines
1.1 KiB
import { cn } from '@/lib/utils' |
|
import { TEmoji } from '@/types' |
|
import { Heart } from 'lucide-react' |
|
import { HTMLAttributes, useState } from 'react' |
|
|
|
export default function Emoji({ |
|
emoji, |
|
classNames |
|
}: Omit<HTMLAttributes<HTMLDivElement>, 'className'> & { |
|
emoji: TEmoji | string |
|
classNames?: { |
|
text?: string |
|
img?: string |
|
} |
|
}) { |
|
const [hasError, setHasError] = useState(false) |
|
|
|
if (typeof emoji === 'string') { |
|
return emoji === '+' ? ( |
|
<Heart className={cn('size-5 text-red-400 fill-red-400', classNames?.img)} /> |
|
) : ( |
|
<span className={cn('whitespace-nowrap', classNames?.text)}>{emoji}</span> |
|
) |
|
} |
|
|
|
if (hasError) { |
|
return ( |
|
<span className={cn('whitespace-nowrap', classNames?.text)}>{`:${emoji.shortcode}:`}</span> |
|
) |
|
} |
|
|
|
return ( |
|
<img |
|
src={emoji.url} |
|
alt={emoji.shortcode} |
|
draggable={false} |
|
className={cn('inline-block size-5 rounded-sm pointer-events-none', classNames?.img)} |
|
onLoad={() => { |
|
setHasError(false) |
|
}} |
|
onError={() => { |
|
setHasError(true) |
|
}} |
|
/> |
|
) |
|
}
|
|
|