index.tsx raw

   1  import { Skeleton } from '@/components/ui/skeleton'
   2  import { useFetchEvent } from '@/hooks'
   3  import { cn } from '@/lib/utils'
   4  import { useTranslation } from 'react-i18next'
   5  import ContentPreview from '../ContentPreview'
   6  import UserAvatar from '../UserAvatar'
   7  
   8  export default function ParentNotePreview({
   9    eventId,
  10    externalContent,
  11    className,
  12    onClick
  13  }: {
  14    eventId?: string
  15    externalContent?: string
  16    className?: string
  17    onClick?: React.MouseEventHandler<HTMLDivElement> | undefined
  18  }) {
  19    const { t } = useTranslation()
  20    const { event, isFetching } = useFetchEvent(eventId)
  21  
  22    if (externalContent) {
  23      return (
  24        <div
  25          className={cn(
  26            'flex gap-1 items-center text-sm rounded-full px-2 bg-muted w-fit max-w-full text-muted-foreground hover:text-foreground cursor-pointer',
  27            className
  28          )}
  29          onClick={onClick}
  30        >
  31          <div className="shrink-0">{t('reply to')}</div>
  32          <div className="truncate">{externalContent}</div>
  33        </div>
  34      )
  35    }
  36  
  37    if (!eventId) {
  38      return null
  39    }
  40  
  41    if (isFetching) {
  42      return (
  43        <div
  44          className={cn(
  45            'flex gap-1 items-center text-sm rounded-full px-2 bg-muted w-44 max-w-full text-muted-foreground',
  46            className
  47          )}
  48        >
  49          <div className="shrink-0">{t('reply to')}</div>
  50          <Skeleton className="w-4 h-4 rounded-full" />
  51          <div className="py-1 flex-1">
  52            <Skeleton className="h-3" />
  53          </div>
  54        </div>
  55      )
  56    }
  57  
  58    return (
  59      <div
  60        className={cn(
  61          'flex gap-1 items-center text-sm rounded-full px-2 bg-muted w-fit max-w-full text-muted-foreground',
  62          event && 'hover:text-foreground cursor-pointer',
  63          className
  64        )}
  65        onClick={event ? onClick : undefined}
  66      >
  67        <div className="shrink-0">{t('reply to')}</div>
  68        {event && <UserAvatar className="shrink-0" userId={event.pubkey} size="tiny" />}
  69        <ContentPreview className="truncate" event={event} />
  70      </div>
  71    )
  72  }
  73