CommunityDefinition.tsx raw

   1  import { getCommunityDefinitionFromEvent } 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 CommunityDefinition({
   9    event,
  10    className
  11  }: {
  12    event: Event
  13    className?: string
  14  }) {
  15    const { autoLoadMedia } = useContentPolicy()
  16    const metadata = useMemo(() => getCommunityDefinitionFromEvent(event), [event])
  17  
  18    const communityNameComponent = (
  19      <div className="text-xl font-semibold line-clamp-1">{metadata.name}</div>
  20    )
  21  
  22    const communityDescriptionComponent = metadata.description && (
  23      <div className="text-sm text-muted-foreground line-clamp-2">{metadata.description}</div>
  24    )
  25  
  26    return (
  27      <div className={className}>
  28        <div className="flex gap-4">
  29          {metadata.image && autoLoadMedia && (
  30            <Image
  31              image={{ url: metadata.image, pubkey: event.pubkey }}
  32              className="aspect-square bg-foreground h-20"
  33              hideIfError
  34            />
  35          )}
  36          <div className="flex-1 w-0 space-y-1">
  37            {communityNameComponent}
  38            {communityDescriptionComponent}
  39          </div>
  40        </div>
  41        <ClientSelect className="w-full mt-2" event={event} />
  42      </div>
  43    )
  44  }
  45