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.
57 lines
1.6 KiB
57 lines
1.6 KiB
import ContentImage from '@/components/Image' |
|
import UserAvatar from '@/components/UserAvatar' |
|
import { cn } from '@/lib/utils' |
|
import type { Event } from 'nostr-tools' |
|
|
|
/** |
|
* Long-form / wiki–style card cover: NIP-23 `image` tag when present, otherwise the author avatar. |
|
*/ |
|
export default function ArticleCardCoverImage({ |
|
event, |
|
imageUrl, |
|
autoLoadMedia, |
|
layout, |
|
hideImageIfError = false |
|
}: { |
|
event: Event |
|
imageUrl?: string |
|
autoLoadMedia: boolean |
|
layout: 'stacked' | 'row' |
|
/** Passed through to {@link ContentImage} when an `image` tag URL exists. */ |
|
hideImageIfError?: boolean |
|
}) { |
|
const trimmed = imageUrl?.trim() |
|
if (trimmed && autoLoadMedia) { |
|
return ( |
|
<ContentImage |
|
image={{ url: trimmed, pubkey: event.pubkey }} |
|
className={ |
|
layout === 'stacked' |
|
? 'mb-3 aspect-video w-full max-w-[400px]' |
|
: 'h-44 max-w-[400px] shrink rounded-lg bg-foreground object-cover aspect-[4/3] xl:aspect-video' |
|
} |
|
classNames={layout === 'row' ? { wrapper: 'w-auto max-w-[400px] shrink-0' } : undefined} |
|
hideIfError={hideImageIfError} |
|
/> |
|
) |
|
} |
|
if (trimmed) return null |
|
|
|
return ( |
|
<div |
|
className={cn( |
|
'flex items-center justify-center rounded-lg bg-muted', |
|
layout === 'stacked' |
|
? 'mb-3 h-44 w-full max-w-[400px]' |
|
: 'h-44 w-auto max-w-[400px] shrink-0 aspect-[4/3] xl:aspect-video' |
|
)} |
|
> |
|
<UserAvatar |
|
userId={event.pubkey} |
|
size="large" |
|
deferRemoteAvatar={false} |
|
className="!h-[7.5rem] !w-[7.5rem] rounded-xl" |
|
/> |
|
</div> |
|
) |
|
}
|
|
|