4 changed files with 52 additions and 74 deletions
@ -1,57 +0,0 @@ |
|||||||
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area' |
|
||||||
import { useNoteStatsById } from '@/hooks/useNoteStatsById' |
|
||||||
import { formatAmount } from '@/lib/lightning' |
|
||||||
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 noteStats = useNoteStatsById(event.id) |
|
||||||
const [zapIndex, setZapIndex] = useState(-1) |
|
||||||
const topZaps = useMemo(() => { |
|
||||||
return noteStats?.zaps?.sort((a, b) => b.amount - a.amount).slice(0, 10) || [] |
|
||||||
}, [noteStats]) |
|
||||||
|
|
||||||
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 max-w-72 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 shrink-0" /> |
|
||||||
<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} |
|
||||||
event={event} |
|
||||||
defaultAmount={zap.amount} |
|
||||||
defaultComment={zap.comment} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
))} |
|
||||||
</div> |
|
||||||
<ScrollBar orientation="horizontal" /> |
|
||||||
</ScrollArea> |
|
||||||
) |
|
||||||
} |
|
||||||
Loading…
Reference in new issue