58 lines
2 KiB
TypeScript
58 lines
2 KiB
TypeScript
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
|
|
import { formatAmount } from '@/lib/lightning'
|
|
import { useNoteStats } from '@/providers/NoteStatsProvider'
|
|
import { Zap } from 'lucide-react'
|
|
import { Event } from 'nostr-tools'
|
|
import { useMemo, useState } from 'react'
|
|
import { SimpleUserAvatar } from '../UserAvatar'
|
|
import ZapDialog from '../ZapDialog'
|
|
|
|
export default function TopZaps({ event }: { event: Event }) {
|
|
const { noteStatsMap } = useNoteStats()
|
|
const [zapIndex, setZapIndex] = useState(-1)
|
|
const topZaps = useMemo(() => {
|
|
const stats = noteStatsMap.get(event.id) || {}
|
|
return stats.zaps?.slice(0, 10) || []
|
|
}, [noteStatsMap, event])
|
|
|
|
if (!topZaps.length) return null
|
|
|
|
return (
|
|
<ScrollArea className="pb-2 mb-1">
|
|
<div className="flex gap-1">
|
|
{topZaps.map((zap, index) => (
|
|
<div
|
|
key={zap.pr}
|
|
className="flex gap-1 py-1 pl-1 pr-2 text-sm rounded-full bg-muted/80 items-center text-yellow-400 border border-yellow-400 hover:bg-yellow-400/20 cursor-pointer"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
setZapIndex(index)
|
|
}}
|
|
>
|
|
<SimpleUserAvatar userId={zap.pubkey} size="xSmall" />
|
|
<Zap className="size-3 fill-yellow-400" />
|
|
<div className="font-semibold">{formatAmount(zap.amount)}</div>
|
|
<div className="truncate">{zap.comment}</div>
|
|
<div onClick={(e) => e.stopPropagation()}>
|
|
<ZapDialog
|
|
open={zapIndex === index}
|
|
setOpen={(open) => {
|
|
if (open) {
|
|
setZapIndex(index)
|
|
} else {
|
|
setZapIndex(-1)
|
|
}
|
|
}}
|
|
pubkey={event.pubkey}
|
|
eventId={event.id}
|
|
defaultAmount={zap.amount}
|
|
defaultComment={zap.comment}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<ScrollBar orientation="horizontal" />
|
|
</ScrollArea>
|
|
)
|
|
}
|