76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
|
import { memo } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import { User } from '@shared/user';
|
|
|
|
import { NoteActions } from './actions';
|
|
|
|
export function ArticleNote({ event }: { event: NDKEvent }) {
|
|
const getMetadata = () => {
|
|
const title = event.tags.find((tag) => tag[0] === 'title')?.[1];
|
|
const image = event.tags.find((tag) => tag[0] === 'image')?.[1];
|
|
const summary = event.tags.find((tag) => tag[0] === 'summary')?.[1];
|
|
|
|
let publishedAt: Date | string | number = event.tags.find(
|
|
(tag) => tag[0] === 'published_at'
|
|
)?.[1];
|
|
if (publishedAt) {
|
|
publishedAt = new Date(parseInt(publishedAt) * 1000).toLocaleDateString('en-US');
|
|
} else {
|
|
publishedAt = new Date(event.created_at * 1000).toLocaleDateString('en-US');
|
|
}
|
|
|
|
return {
|
|
title,
|
|
image,
|
|
publishedAt,
|
|
summary,
|
|
};
|
|
};
|
|
|
|
const metadata = getMetadata();
|
|
|
|
return (
|
|
<div className="mb-3 h-min w-full px-3">
|
|
<div className="relative flex flex-col gap-2 overflow-hidden rounded-xl bg-neutral-50 pt-3 dark:bg-neutral-950">
|
|
<User pubkey={event.pubkey} time={event.created_at} eventId={event.id} />
|
|
<div className="px-3">
|
|
<Link
|
|
to={`/notes/article/${event.id}`}
|
|
preventScrollReset={true}
|
|
className="flex w-full flex-col rounded-lg bg-neutral-100 dark:bg-neutral-900"
|
|
>
|
|
{metadata.image && (
|
|
<img
|
|
src={metadata.image}
|
|
alt={metadata.title}
|
|
loading="lazy"
|
|
decoding="async"
|
|
style={{ contentVisibility: 'auto' }}
|
|
className="h-auto w-full rounded-t-lg object-cover"
|
|
/>
|
|
)}
|
|
<div className="flex flex-col gap-1 rounded-b-lg rounded-t-lg bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
|
|
<h5 className="break-all font-semibold text-neutral-900 dark:text-neutral-100">
|
|
{metadata.title}
|
|
</h5>
|
|
{metadata.summary ? (
|
|
<p className="line-clamp-3 break-all text-sm text-neutral-600 dark:text-neutral-400">
|
|
{metadata.summary}
|
|
</p>
|
|
) : null}
|
|
<span className="mt-2.5 text-sm text-neutral-600 dark:text-neutral-400">
|
|
{metadata.publishedAt.toString()}
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
<NoteActions event={event} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const MemoizedArticleNote = memo(ArticleNote);
|