71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
import { Badge } from '@/components/ui/badge'
|
|
import { getLongFormArticleMetadataFromEvent } from '@/lib/event-metadata'
|
|
import { useScreenSize } from '@/providers/ScreenSizeProvider'
|
|
import { Event } from 'nostr-tools'
|
|
import { useMemo } from 'react'
|
|
import Image from '../Image'
|
|
|
|
export default function LongFormArticlePreview({
|
|
event,
|
|
className
|
|
}: {
|
|
event: Event
|
|
className?: string
|
|
}) {
|
|
const { isSmallScreen } = useScreenSize()
|
|
const metadata = useMemo(() => getLongFormArticleMetadataFromEvent(event), [event])
|
|
|
|
const titleComponent = <div className="text-xl font-semibold line-clamp-2">{metadata.title}</div>
|
|
|
|
const tagsComponent = metadata.tags.length > 0 && (
|
|
<div className="flex gap-1 flex-wrap">
|
|
{metadata.tags.map((tag) => (
|
|
<Badge key={tag} variant="secondary">
|
|
{tag}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
)
|
|
|
|
const summaryComponent = metadata.summary && (
|
|
<div className="text-sm text-muted-foreground line-clamp-4">{metadata.summary}</div>
|
|
)
|
|
|
|
if (isSmallScreen) {
|
|
return (
|
|
<div className={className}>
|
|
{metadata.image && (
|
|
<Image
|
|
image={{ url: metadata.image, pubkey: event.pubkey }}
|
|
className="w-full aspect-video object-cover rounded-lg"
|
|
hideIfError
|
|
/>
|
|
)}
|
|
<div className="space-y-1">
|
|
{titleComponent}
|
|
{summaryComponent}
|
|
{tagsComponent}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className={className}>
|
|
<div className="flex gap-4">
|
|
{metadata.image && (
|
|
<Image
|
|
image={{ url: metadata.image, pubkey: event.pubkey }}
|
|
className="rounded-lg aspect-[4/3] xl:aspect-video object-cover bg-foreground h-44"
|
|
hideIfError
|
|
/>
|
|
)}
|
|
<div className="flex-1 w-0 space-y-1">
|
|
{titleComponent}
|
|
{summaryComponent}
|
|
{tagsComponent}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|