You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
758 B
33 lines
758 B
import { generateImageByPubkey } from '@/lib/pubkey' |
|
import { useEffect, useMemo, useState } from 'react' |
|
import Image from '../Image' |
|
|
|
export default function ProfileBanner({ |
|
pubkey, |
|
banner, |
|
className |
|
}: { |
|
pubkey: string |
|
banner?: string |
|
className?: string |
|
}) { |
|
const defaultBanner = useMemo(() => generateImageByPubkey(pubkey), [pubkey]) |
|
const [bannerUrl, setBannerUrl] = useState(banner ?? defaultBanner) |
|
|
|
useEffect(() => { |
|
if (banner) { |
|
setBannerUrl(banner) |
|
} else { |
|
setBannerUrl(defaultBanner) |
|
} |
|
}, [defaultBanner, banner]) |
|
|
|
return ( |
|
<Image |
|
image={{ url: bannerUrl, pubkey }} |
|
alt={`${pubkey} banner`} |
|
className={className} |
|
onError={() => setBannerUrl(defaultBanner)} |
|
/> |
|
) |
|
}
|
|
|