style: adjust the style of NoteStats (#222)

src/components/NoteStats/index.tsx

@@ -1,9 +1,9 @@
 import { cn } from '@/lib/utils'
 import { useNoteStats } from '@/providers/NoteStatsProvider'
+import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import { Event } from 'nostr-tools'
 import { useEffect } from 'react'
 import LikeButton from './LikeButton'
-import NoteOptions from './NoteOptions'
 import ReplyButton from './ReplyButton'
 import RepostButton from './RepostButton'
 import SeenOnButton from './SeenOnButton'
@@ -13,14 +13,19 @@ import ZapButton from './ZapButton'
 export default function NoteStats({
   event,
   className,
+  classNames,
   fetchIfNotExisting = false,
   variant = 'note'
 }: {
   event: Event
   className?: string
+  classNames?: {
+    buttonBar?: string
+  }
   fetchIfNotExisting?: boolean
   variant?: 'note' | 'reply'
 }) {
+  const { isSmallScreen } = useScreenSize()
   const { fetchNoteStats } = useNoteStats()
 
   useEffect(() => {
@@ -28,19 +33,39 @@ export default function NoteStats({
     fetchNoteStats(event)
   }, [event, fetchIfNotExisting])
 
+  if (isSmallScreen) {
+    return (
+      <div className={cn('select-none', className)}>
+        <TopZaps event={event} />
+        <div
+          className={cn(
+            'flex justify-between items-center h-5 [&_svg]:size-5',
+            classNames?.buttonBar
+          )}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <ReplyButton event={event} variant={variant} />
+          <RepostButton event={event} />
+          <LikeButton event={event} />
+          <ZapButton event={event} />
+          <SeenOnButton event={event} />
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className={cn('select-none', className)}>
       <TopZaps event={event} />
-      <div className="flex justify-between">
-        <div className="flex gap-5 h-4 items-center" onClick={(e) => e.stopPropagation()}>
+      <div className="flex justify-between h-5 [&_svg]:size-4">
+        <div className="flex items-center" onClick={(e) => e.stopPropagation()}>
           <ReplyButton event={event} variant={variant} />
           <RepostButton event={event} />
           <LikeButton event={event} />
           <ZapButton event={event} />
         </div>
-        <div className="flex gap-5 h-4 items-center" onClick={(e) => e.stopPropagation()}>
+        <div className="flex items-center" onClick={(e) => e.stopPropagation()}>
           <SeenOnButton event={event} />
-          <NoteOptions event={event} />
         </div>
       </div>
     </div>