7 changed files with 122 additions and 34 deletions
@ -0,0 +1,57 @@
@@ -0,0 +1,57 @@
|
||||
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> |
||||
) |
||||
} |
||||
Loading…
Reference in new issue