GroupMetadata.tsx raw

   1  import { getGroupMetadataFromEvent } from '@/lib/event-metadata'
   2  import { useContentPolicy } from '@/providers/ContentPolicyProvider'
   3  import { Event } from 'nostr-tools'
   4  import { useMemo } from 'react'
   5  import ClientSelect from '../ClientSelect'
   6  import Image from '../Image'
   7  
   8  export default function GroupMetadata({
   9    event,
  10    originalNoteId,
  11    className
  12  }: {
  13    event: Event
  14    originalNoteId?: string
  15    className?: string
  16  }) {
  17    const { autoLoadMedia } = useContentPolicy()
  18    const metadata = useMemo(() => getGroupMetadataFromEvent(event), [event])
  19  
  20    const groupNameComponent = (
  21      <div className="text-xl font-semibold line-clamp-1">{metadata.name}</div>
  22    )
  23  
  24    const groupAboutComponent = metadata.about && (
  25      <div className="text-sm text-muted-foreground line-clamp-2">{metadata.about}</div>
  26    )
  27  
  28    return (
  29      <div className={className}>
  30        <div className="flex gap-4">
  31          {metadata.picture && autoLoadMedia && (
  32            <Image
  33              image={{ url: metadata.picture, pubkey: event.pubkey }}
  34              className="aspect-square bg-foreground h-20"
  35              hideIfError
  36            />
  37          )}
  38          <div className="flex-1 w-0 space-y-1">
  39            {groupNameComponent}
  40            {groupAboutComponent}
  41          </div>
  42        </div>
  43        <ClientSelect className="w-full mt-2" event={event} originalNoteId={originalNoteId} />
  44      </div>
  45    )
  46  }
  47