feat: zap details (#731)

Co-authored-by: The Daniel <dmnyc@users.noreply.github.com>
Co-authored-by: The Daniel ️ <dmnycnet@proton.me>
This commit is contained in:
Cody Tseng 2026-01-13 22:54:50 +08:00 committed by GitHub
parent 603bd35b4a
commit 7e8f1692ac
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
21 changed files with 138 additions and 47 deletions

View file

@ -1,12 +1,14 @@
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
import { useStuffStatsById } from '@/hooks/useStuffStatsById'
import { useStuff } from '@/hooks/useStuff'
import { useStuffStatsById } from '@/hooks/useStuffStatsById'
import { createFakeEvent } from '@/lib/event'
import { formatAmount } from '@/lib/lightning'
import { Zap } from 'lucide-react'
import { Event } from 'nostr-tools'
import { useMemo, useState } from 'react'
import ContentPreview from '../ContentPreview'
import { SimpleUserAvatar } from '../UserAvatar'
import ZapDialog from '../ZapDialog'
import ZapDetailDialog from '../ZapDetailDialog'
export default function TopZaps({ stuff }: { stuff: Event | string }) {
const { event, stuffKey } = useStuff(stuff)
@ -22,34 +24,35 @@ export default function TopZaps({ stuff }: { stuff: Event | string }) {
<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 key={zap.pr}>
<div
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>
<ContentPreview
className="truncate"
event={createFakeEvent({
content: zap.comment
})}
/>
</div>
<ZapDetailDialog
open={zapIndex === index}
setOpen={(open) => {
if (open) {
setZapIndex(index)
} else {
setZapIndex(-1)
}
}}
zap={zap}
/>
</div>
))}
</div>