Files
smesh/src/pages/secondary/ProfilePage/QrCodePopover.tsx
2024-12-21 23:20:30 +08:00

24 lines
807 B
TypeScript

import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { QrCode } from 'lucide-react'
import { nip19 } from 'nostr-tools'
import { useMemo } from 'react'
import { QRCodeSVG } from 'qrcode.react'
export default function QrCodePopover({ pubkey }: { pubkey: string }) {
const npub = useMemo(() => (pubkey ? nip19.npubEncode(pubkey) : ''), [pubkey])
if (!npub) return null
return (
<Popover>
<PopoverTrigger>
<div className="bg-muted rounded-full h-5 w-5 flex flex-col items-center justify-center text-muted-foreground hover:text-foreground">
<QrCode size={14} />
</div>
</PopoverTrigger>
<PopoverContent className="w-fit h-fit">
<QRCodeSVG value={`nostr:${npub}`} />
</PopoverContent>
</Popover>
)
}