feat: support kind 20

src/components/PictureNoteCard/index.tsx

@@ -0,0 +1,31 @@
+import { extractFirstPictureFromPictureEvent } from '@/lib/event'
+import { toNote } from '@/lib/link'
+import { cn } from '@/lib/utils'
+import { useSecondaryPage } from '@/PageManager'
+import { Event } from 'nostr-tools'
+import Image from '../Image'
+import UserAvatar from '../UserAvatar'
+import Username from '../Username'
+
+export default function PictureNoteCard({
+  event,
+  className
+}: {
+  event: Event
+  className?: string
+}) {
+  const { push } = useSecondaryPage()
+  const firstImage = extractFirstPictureFromPictureEvent(event)
+  if (!firstImage) return null
+
+  return (
+    <div className={cn('space-y-1 cursor-pointer', className)} onClick={() => push(toNote(event))}>
+      <Image className="rounded-lg w-full aspect-[6/8]" src={firstImage} />
+      <div className="line-clamp-2 px-2">{event.content}</div>
+      <div className="flex items-center gap-2 px-2">
+        <UserAvatar userId={event.pubkey} size="xSmall" />
+        <Username userId={event.pubkey} className="text-sm text-muted-foreground truncate" />
+      </div>
+    </div>
+  )
+}