index.tsx raw

   1  import { generateImageByPubkey } from '@/lib/pubkey'
   2  import { useEffect, useMemo, useState } from 'react'
   3  import Image from '../Image'
   4  
   5  export default function ProfileBanner({
   6    pubkey,
   7    banner,
   8    className
   9  }: {
  10    pubkey: string
  11    banner?: string
  12    className?: string
  13  }) {
  14    const defaultBanner = useMemo(() => generateImageByPubkey(pubkey), [pubkey])
  15    const [bannerUrl, setBannerUrl] = useState(banner ?? defaultBanner)
  16  
  17    useEffect(() => {
  18      if (banner) {
  19        setBannerUrl(banner)
  20      } else {
  21        setBannerUrl(defaultBanner)
  22      }
  23    }, [defaultBanner, banner])
  24  
  25    return (
  26      <Image
  27        image={{ url: bannerUrl, pubkey }}
  28        alt={`${pubkey} banner`}
  29        className={className}
  30        classNames={{
  31          wrapper: 'rounded-none'
  32        }}
  33        errorPlaceholder={defaultBanner}
  34      />
  35    )
  36  }
  37