AvatarWithLightbox.tsx raw

   1  import { Skeleton } from '@/components/ui/skeleton'
   2  import { useFetchProfile } from '@/hooks'
   3  import { generateImageByPubkey } from '@/lib/pubkey'
   4  import { useMemo } from 'react'
   5  import ImageWithLightbox from '../ImageWithLightbox'
   6  
   7  export default function AvatarWithLightbox({ userId }: { userId: string }) {
   8    const { profile } = useFetchProfile(userId)
   9    const defaultAvatar = useMemo(
  10      () => (profile?.pubkey ? generateImageByPubkey(profile.pubkey) : ''),
  11      [profile]
  12    )
  13  
  14    if (!profile) {
  15      return (
  16        <Skeleton className="shrink-0 w-24 h-24 rounded-full absolute left-3 bottom-0 translate-y-1/2 border-4 border-background" />
  17      )
  18    }
  19    const { avatar, pubkey } = profile || {}
  20  
  21    return (
  22      <ImageWithLightbox
  23        image={{ url: avatar ?? defaultAvatar, pubkey }}
  24        errorPlaceholder={defaultAvatar}
  25        className="object-cover object-center"
  26        classNames={{
  27          wrapper:
  28            'shrink-0 rounded-full bg-background w-24 h-24 absolute left-3 bottom-0 translate-y-1/2 border-4 border-background'
  29        }}
  30        ignoreAutoLoadPolicy
  31      />
  32    )
  33  }
  34