RelayReviewCard.tsx raw

   1  import { useSecondaryPage } from '@/PageManager'
   2  import { getStarsFromRelayReviewEvent } from '@/lib/event-metadata'
   3  import { toNote } from '@/lib/link'
   4  import { cn } from '@/lib/utils'
   5  import { NostrEvent } from 'nostr-tools'
   6  import { useMemo } from 'react'
   7  import ClientTag from '../ClientTag'
   8  import ContentPreview from '../ContentPreview'
   9  import { FormattedTimestamp } from '../FormattedTimestamp'
  10  import Nip05 from '../Nip05'
  11  import Stars from '../Stars'
  12  import { SimpleUserAvatar } from '../UserAvatar'
  13  import { SimpleUsername } from '../Username'
  14  
  15  export default function RelayReviewCard({
  16    event,
  17    className
  18  }: {
  19    event: NostrEvent
  20    className?: string
  21  }) {
  22    const { push } = useSecondaryPage()
  23    const stars = useMemo(() => getStarsFromRelayReviewEvent(event), [event])
  24  
  25    return (
  26      <div
  27        className={cn('clickable border rounded-lg bg-muted/20 p-3 h-full', className)}
  28        onClick={() => push(toNote(event))}
  29      >
  30        <div className="flex justify-between items-start gap-2">
  31          <div className="flex items-center space-x-2 flex-1">
  32            <SimpleUserAvatar userId={event.pubkey} size="medium" />
  33            <div className="flex-1 w-0">
  34              <div className="flex gap-2 items-center">
  35                <SimpleUsername
  36                  userId={event.pubkey}
  37                  className="font-semibold flex truncate text-sm"
  38                  skeletonClassName="h-3"
  39                />
  40                <ClientTag event={event} />
  41              </div>
  42              <div className="flex items-center gap-1 text-sm text-muted-foreground">
  43                <Nip05 pubkey={event.pubkey} append="·" />
  44                <FormattedTimestamp timestamp={event.created_at} className="shrink-0" short />
  45              </div>
  46            </div>
  47          </div>
  48        </div>
  49        <Stars stars={stars} className="mt-2 gap-0.5 [&_svg]:size-3" />
  50        <ContentPreview className="mt-2 line-clamp-4" event={event} />
  51      </div>
  52    )
  53  }
  54