wip
This commit is contained in:
@@ -1,21 +1,18 @@
|
||||
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||
import { memo, useMemo } from 'react';
|
||||
import { NDKTag } from '@nostr-dev-kit/ndk';
|
||||
import { memo } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
export function ArticleNote(props: { event?: NDKEvent }) {
|
||||
const metadata = useMemo(() => {
|
||||
const title = props.event.tags.find((tag) => tag[0] === 'title')?.[1];
|
||||
const image = props.event.tags.find((tag) => tag[0] === 'image')?.[1];
|
||||
const summary = props.event.tags.find((tag) => tag[0] === 'summary')?.[1];
|
||||
export function ArticleKind({ id, tags }: { id: string; tags: NDKTag[] }) {
|
||||
const getMetadata = () => {
|
||||
const title = tags.find((tag) => tag[0] === 'title')?.[1];
|
||||
const image = tags.find((tag) => tag[0] === 'image')?.[1];
|
||||
const summary = tags.find((tag) => tag[0] === 'summary')?.[1];
|
||||
|
||||
let publishedAt: Date | string | number = props.event.tags.find(
|
||||
let publishedAt: Date | string | number = tags.find(
|
||||
(tag) => tag[0] === 'published_at'
|
||||
)?.[1];
|
||||
if (publishedAt) {
|
||||
publishedAt = new Date(parseInt(publishedAt) * 1000).toLocaleDateString('en-US');
|
||||
} else {
|
||||
publishedAt = new Date(props.event.created_at * 1000).toLocaleDateString('en-US');
|
||||
}
|
||||
|
||||
publishedAt = new Date(parseInt(publishedAt) * 1000).toLocaleDateString('en-US');
|
||||
|
||||
return {
|
||||
title,
|
||||
@@ -23,23 +20,25 @@ export function ArticleNote(props: { event?: NDKEvent }) {
|
||||
publishedAt,
|
||||
summary,
|
||||
};
|
||||
}, [props.event.id]);
|
||||
};
|
||||
|
||||
const metadata = getMetadata();
|
||||
|
||||
return (
|
||||
<Link
|
||||
to={`/notes/article/${props.event.id}`}
|
||||
to={`/notes/article/${id}`}
|
||||
preventScrollReset={true}
|
||||
className="mt-2 flex w-full flex-col rounded-lg border border-neutral-300 bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"
|
||||
className="flex w-full flex-col rounded-lg border border-neutral-200 bg-neutral-100 dark:border-neutral-800 dark:bg-neutral-900"
|
||||
>
|
||||
{metadata.image && (
|
||||
<img
|
||||
src={metadata.image}
|
||||
alt={metadata.title}
|
||||
className="h-44 w-full rounded-t-lg object-cover"
|
||||
className="h-56 w-full rounded-t-lg object-cover"
|
||||
/>
|
||||
)}
|
||||
<div className="flex flex-col gap-1 rounded-b-lg bg-neutral-200 px-3 py-3 dark:bg-neutral-800">
|
||||
<h5 className="line-clamp-1 font-semibold text-neutral-900 dark:text-neutral-100">
|
||||
<h5 className="break-all font-semibold text-neutral-900 dark:text-neutral-100">
|
||||
{metadata.title}
|
||||
</h5>
|
||||
{metadata.summary ? (
|
||||
@@ -55,4 +54,4 @@ export function ArticleNote(props: { event?: NDKEvent }) {
|
||||
);
|
||||
}
|
||||
|
||||
export const MemoizedArticleNote = memo(ArticleNote);
|
||||
export const MemoizedArticleKind = memo(ArticleKind);
|
||||
|
||||
Reference in New Issue
Block a user