73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
|
|
import { memo } from 'react';
|
|
|
|
import {
|
|
MemoizedArticleKind,
|
|
MemoizedFileKind,
|
|
MemoizedTextKind,
|
|
NoteSkeleton,
|
|
} from '@shared/notes';
|
|
import { User } from '@shared/user';
|
|
|
|
import { WIDGET_KIND } from '@utils/constants';
|
|
import { useEvent } from '@utils/hooks/useEvent';
|
|
import { useWidget } from '@utils/hooks/useWidget';
|
|
|
|
export const MentionNote = memo(function MentionNote({
|
|
id,
|
|
editing,
|
|
}: {
|
|
id: string;
|
|
editing?: boolean;
|
|
}) {
|
|
const { status, data } = useEvent(id);
|
|
const { addWidget } = useWidget();
|
|
|
|
const renderKind = (event: NDKEvent) => {
|
|
switch (event.kind) {
|
|
case NDKKind.Text:
|
|
return <MemoizedTextKind content={event.content} textmode />;
|
|
case NDKKind.Article:
|
|
return <MemoizedArticleKind id={event.id} tags={event.tags} />;
|
|
case 1063:
|
|
return <MemoizedFileKind tags={event.tags} />;
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
if (status === 'pending') {
|
|
return (
|
|
<div className="w-full cursor-default rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
|
|
<NoteSkeleton />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="my-2 flex w-full cursor-default flex-col gap-1 rounded-lg bg-neutral-100 dark:bg-neutral-900">
|
|
<div className="mt-3 px-3">
|
|
<User pubkey={data.pubkey} time={data.created_at} variant="mention" />
|
|
</div>
|
|
<div className="mt-1 px-3 pb-3">
|
|
{renderKind(data)}
|
|
{!editing ? (
|
|
<button
|
|
type="button"
|
|
onClick={() =>
|
|
addWidget.mutate({
|
|
kind: WIDGET_KIND.thread,
|
|
title: 'Thread',
|
|
content: data.id,
|
|
})
|
|
}
|
|
className="mt-2 text-blue-500 hover:text-blue-600"
|
|
>
|
|
Show more
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|