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.
103 lines
3.4 KiB
103 lines
3.4 KiB
import { cardEventBodyBlurb } from '@/lib/card-event-body-blurb' |
|
import { getLongFormArticleMetadataFromEvent } from '@/lib/event-metadata' |
|
import { toNote, toNoteList } from '@/lib/link' |
|
import { useSecondaryPageOptional } from '@/PageManager' |
|
import { useContentPolicyOptional } from '@/providers/ContentPolicyProvider' |
|
import { useScreenSizeOptional } from '@/providers/ScreenSizeProvider' |
|
import { Event, kinds } from 'nostr-tools' |
|
import { useMemo } from 'react' |
|
import ArticleCardCoverImage from './ArticleCardCoverImage' |
|
|
|
export default function WikiCard({ |
|
event, |
|
className |
|
}: { |
|
event: Event |
|
className?: string |
|
}) { |
|
const screenSize = useScreenSizeOptional() |
|
const isSmallScreen = screenSize?.isSmallScreen ?? false |
|
const secondaryPage = useSecondaryPageOptional() |
|
const push = secondaryPage?.push ?? ((url: string) => { window.location.href = url }) |
|
const contentPolicy = useContentPolicyOptional() |
|
const autoLoadMedia = contentPolicy?.autoLoadMedia ?? true |
|
const metadata = useMemo(() => getLongFormArticleMetadataFromEvent(event), [event]) |
|
const bodyBlurb = useMemo(() => cardEventBodyBlurb(event.content), [event.content]) |
|
const summaryText = (metadata.summary?.trim() || bodyBlurb).trim() |
|
|
|
const handleCardClick = (e: React.MouseEvent) => { |
|
e.stopPropagation() |
|
push(toNote(event)) |
|
} |
|
|
|
const titleComponent = <div className="text-xl font-semibold break-words min-w-0 sm:line-clamp-2">{metadata.title}</div> |
|
|
|
const tagsComponent = metadata.tags.length > 0 && ( |
|
<div className="flex gap-1 flex-wrap"> |
|
{metadata.tags.map((tag) => ( |
|
<div |
|
key={tag} |
|
className="flex items-center rounded-full text-xs px-2.5 py-0.5 bg-muted text-muted-foreground max-w-32 cursor-pointer hover:bg-accent hover:text-accent-foreground" |
|
onClick={(e) => { |
|
e.stopPropagation() |
|
push(toNoteList({ hashtag: tag, kinds: [kinds.LongFormArticle] })) |
|
}} |
|
> |
|
#<span className="truncate">{tag}</span> |
|
</div> |
|
))} |
|
</div> |
|
) |
|
|
|
const summaryComponent = summaryText ? ( |
|
<div className="text-base text-muted-foreground line-clamp-4 break-words">{summaryText}</div> |
|
) : null |
|
|
|
if (isSmallScreen) { |
|
return ( |
|
<div className={className}> |
|
<div |
|
className="cursor-pointer rounded-lg border p-4 hover:bg-muted/50 transition-colors" |
|
onClick={handleCardClick} |
|
> |
|
<ArticleCardCoverImage |
|
event={event} |
|
imageUrl={metadata.image} |
|
autoLoadMedia={autoLoadMedia} |
|
layout="stacked" |
|
hideImageIfError |
|
/> |
|
<div className="space-y-2"> |
|
{titleComponent} |
|
{summaryComponent} |
|
{tagsComponent} |
|
</div> |
|
</div> |
|
</div> |
|
) |
|
} |
|
|
|
return ( |
|
<div className={className}> |
|
<div |
|
className="cursor-pointer rounded-lg border p-4 hover:bg-muted/50 transition-colors" |
|
onClick={handleCardClick} |
|
> |
|
<div className="flex gap-4"> |
|
<ArticleCardCoverImage |
|
event={event} |
|
imageUrl={metadata.image} |
|
autoLoadMedia={autoLoadMedia} |
|
layout="row" |
|
hideImageIfError |
|
/> |
|
<div className="flex-1 w-0 space-y-2"> |
|
{titleComponent} |
|
{summaryComponent} |
|
{tagsComponent} |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
) |
|
}
|
|
|