73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
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 ReplyButton from './ReplyButton'
|
|
import RepostButton from './RepostButton'
|
|
import SeenOnButton from './SeenOnButton'
|
|
import TopZaps from './TopZaps'
|
|
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(() => {
|
|
if (!fetchIfNotExisting) return
|
|
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 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 items-center" onClick={(e) => e.stopPropagation()}>
|
|
<SeenOnButton event={event} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|