58 lines
2.1 KiB
TypeScript
58 lines
2.1 KiB
TypeScript
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
|
import { memo } from 'react';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
import { useArk } from '@libs/ark';
|
|
|
|
import { ChildNote, NoteActions } from '@shared/notes';
|
|
import { User } from '@shared/user';
|
|
|
|
import { WIDGET_KIND } from '@utils/constants';
|
|
import { useRichContent } from '@utils/hooks/useRichContent';
|
|
import { useWidget } from '@utils/hooks/useWidget';
|
|
|
|
export function TextNote({ event, className }: { event: NDKEvent; className?: string }) {
|
|
const { parsedContent } = useRichContent(event.content);
|
|
const { addWidget } = useWidget();
|
|
const { ark } = useArk();
|
|
|
|
const thread = ark.getEventThread({ tags: event.tags });
|
|
|
|
return (
|
|
<div className={twMerge('mb-3 h-min w-full px-3', className)}>
|
|
<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} />
|
|
{thread ? (
|
|
<div className="w-full px-3">
|
|
<div className="flex h-min w-full flex-col gap-3 rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
|
|
{thread.rootEventId ? <ChildNote id={thread.rootEventId} isRoot /> : null}
|
|
{thread.replyEventId ? <ChildNote id={thread.replyEventId} /> : null}
|
|
<button
|
|
type="button"
|
|
onClick={() =>
|
|
addWidget.mutate({
|
|
kind: WIDGET_KIND.thread,
|
|
title: 'Thread',
|
|
content: thread.rootEventId,
|
|
})
|
|
}
|
|
className="self-start text-blue-500 hover:text-blue-600"
|
|
>
|
|
Show full thread
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
<div className="min-w-0 px-3">
|
|
<div className="break-p select-text whitespace-pre-line leading-normal text-neutral-900 dark:text-neutral-100">
|
|
{parsedContent}
|
|
</div>
|
|
</div>
|
|
<NoteActions event={event} rootEventId={thread?.rootEventId} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const MemoizedTextNote = memo(TextNote);
|