TopZaps.tsx raw

   1  import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
   2  import { useStuffStatsById } from '@/hooks/useStuffStatsById'
   3  import { useStuff } from '@/hooks/useStuff'
   4  import { formatAmount } from '@/lib/lightning'
   5  import { Zap } from 'lucide-react'
   6  import { Event } from 'nostr-tools'
   7  import { useMemo, useState } from 'react'
   8  import { SimpleUserAvatar } from '../UserAvatar'
   9  import ZapDialog from '../ZapDialog'
  10  
  11  export default function TopZaps({ stuff }: { stuff: Event | string }) {
  12    const { event, stuffKey } = useStuff(stuff)
  13    const noteStats = useStuffStatsById(stuffKey)
  14    const [zapIndex, setZapIndex] = useState(-1)
  15    const topZaps = useMemo(() => {
  16      return noteStats?.zaps?.sort((a, b) => b.amount - a.amount).slice(0, 10) || []
  17    }, [noteStats])
  18  
  19    if (!topZaps.length || !event) return null
  20  
  21    return (
  22      <ScrollArea className="pb-2 mb-1">
  23        <div className="flex gap-1">
  24          {topZaps.map((zap, index) => (
  25            <div
  26              key={zap.pr}
  27              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"
  28              onClick={(e) => {
  29                e.stopPropagation()
  30                setZapIndex(index)
  31              }}
  32            >
  33              <SimpleUserAvatar userId={zap.pubkey} size="xSmall" />
  34              <Zap className="size-3 fill-yellow-400 shrink-0" />
  35              <div className="font-semibold">{formatAmount(zap.amount)}</div>
  36              <div className="truncate">{zap.comment}</div>
  37              <div onClick={(e) => e.stopPropagation()}>
  38                <ZapDialog
  39                  open={zapIndex === index}
  40                  setOpen={(open) => {
  41                    if (open) {
  42                      setZapIndex(index)
  43                    } else {
  44                      setZapIndex(-1)
  45                    }
  46                  }}
  47                  pubkey={event.pubkey}
  48                  event={event}
  49                  defaultAmount={zap.amount}
  50                  defaultComment={zap.comment}
  51                />
  52              </div>
  53            </div>
  54          ))}
  55        </div>
  56        <ScrollBar orientation="horizontal" />
  57      </ScrollArea>
  58    )
  59  }
  60