feat: add more note interactions lists (#467)

Co-authored-by: Trevor Arjeski <tmarjeski@gmail.com>

src/components/Emoji/index.tsx

@@ -5,30 +5,35 @@ import { HTMLAttributes, useState } from 'react'
 
 export default function Emoji({
   emoji,
-  className = ''
-}: HTMLAttributes<HTMLDivElement> & {
-  className?: string
+  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-4 text-red-400 fill-red-400', className)} />
+      <Heart className={cn('size-4 text-red-400 fill-red-400', classNames?.img)} />
     ) : (
-      <span className={cn('whitespace-nowrap', className)}>{emoji}</span>
+      <span className={cn('whitespace-nowrap', classNames?.text)}>{emoji}</span>
     )
   }
 
   if (hasError) {
-    return <span className={cn('whitespace-nowrap', className)}>{`:${emoji.shortcode}:`}</span>
+    return (
+      <span className={cn('whitespace-nowrap', classNames?.text)}>{`:${emoji.shortcode}:`}</span>
+    )
   }
 
   return (
     <img
       src={emoji.url}
       alt={emoji.shortcode}
-      className={cn('inline-block size-4', className)}
+      className={cn('inline-block size-4', classNames?.img)}
       onLoad={() => {
         setHasError(false)
       }}