This commit is contained in:
2023-11-07 09:35:13 +07:00
parent 701712e7b8
commit ee3e8eb105
42 changed files with 694 additions and 991 deletions

View File

@@ -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);