56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
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>
|
|
)
|
|
}
|