PinnedButton.tsx raw

   1  import { Button } from '@/components/ui/button'
   2  import { useNostr } from '@/providers/NostrProvider'
   3  import { usePinList } from '@/providers/PinListProvider'
   4  import { Loader, Pin } from 'lucide-react'
   5  import { NostrEvent } from 'nostr-tools'
   6  import { useState } from 'react'
   7  import { useTranslation } from 'react-i18next'
   8  
   9  export default function PinnedButton({ event }: { event: NostrEvent }) {
  10    const { t } = useTranslation()
  11    const { pubkey } = useNostr()
  12    const { unpin } = usePinList()
  13    const [hovered, setHovered] = useState(false)
  14    const [unpinning, setUnpinning] = useState(false)
  15  
  16    if (event.pubkey !== pubkey) {
  17      return (
  18        <div className="flex gap-1 text-sm items-center text-primary mb-1 px-4 py-0 h-fit">
  19          <Pin size={16} className="shrink-0" />
  20          {t('Pinned')}
  21        </div>
  22      )
  23    }
  24  
  25    return (
  26      <Button
  27        className="flex gap-1 text-sm text-primary items-center mb-1 px-4 py-0.5 h-fit"
  28        variant="link"
  29        onClick={(e) => {
  30          e.stopPropagation()
  31          setUnpinning(true)
  32          unpin(event).finally(() => setUnpinning(false))
  33        }}
  34        disabled={unpinning}
  35        onMouseEnter={() => setHovered(true)}
  36        onMouseLeave={() => setHovered(false)}
  37      >
  38        {unpinning ? (
  39          <Loader size={16} className="animate-spin shrink-0" />
  40        ) : (
  41          <Pin size={16} className="shrink-0" />
  42        )}
  43        {unpinning ? t('Unpinning') : hovered ? t('Unpin') : t('Pinned')}
  44      </Button>
  45    )
  46  }
  47