BannerWithLightbox.tsx raw

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