feat: support for follow packs

src/components/Note/FollowPack.tsx

@@ -0,0 +1,55 @@
+import { Button } from '@/components/ui/button'
+import { getFollowPackInfoFromEvent } from '@/lib/event-metadata'
+import { toFollowPack } from '@/lib/link'
+import { useSecondaryPage } from '@/PageManager'
+import { Event } from 'nostr-tools'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import Image from '../Image'
+
+export default function FollowPack({ event, className }: { event: Event; className?: string }) {
+  const { t } = useTranslation()
+  const { push } = useSecondaryPage()
+  const { title, description, image, pubkeys } = useMemo(
+    () => getFollowPackInfoFromEvent(event),
+    [event]
+  )
+
+  const handleViewDetails = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    push(toFollowPack(event))
+  }
+
+  return (
+    <div className={className}>
+      <div className="flex items-start gap-2 mb-2">
+        {image && (
+          <Image
+            image={{ url: image, pubkey: event.pubkey }}
+            className="w-24 h-20 object-cover rounded-lg"
+            classNames={{
+              wrapper: 'w-24 h-20 flex-shrink-0',
+              errorPlaceholder: 'w-24 h-20'
+            }}
+            hideIfError
+          />
+        )}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <h3 className="text-xl font-semibold mb-1 truncate">{title}</h3>
+            <span className="text-xs text-muted-foreground shrink-0">
+              {t('n users', { count: pubkeys.length })}
+            </span>
+          </div>
+          {description && (
+            <p className="text-sm text-muted-foreground line-clamp-2">{description}</p>
+          )}
+        </div>
+      </div>
+
+      <Button onClick={handleViewDetails} variant="outline" className="w-full">
+        {t('View Details')}
+      </Button>
+    </div>
+  )
+}