48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import { PinIcon } from "@lume/icons";
|
|
import { cn } from "@lume/utils";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Link } from "react-router-dom";
|
|
import { Note } from ".";
|
|
import { useNoteContext } from "./provider";
|
|
import { useArk } from "@lume/ark";
|
|
|
|
export function NoteThread({ className }: { className?: string }) {
|
|
const ark = useArk();
|
|
const event = useNoteContext();
|
|
const thread = ark.parse_event_thread({
|
|
content: event.content,
|
|
tags: event.tags,
|
|
});
|
|
|
|
const { t } = useTranslation();
|
|
|
|
if (!thread) return null;
|
|
|
|
return (
|
|
<div className={cn("w-full px-3", className)}>
|
|
<div className="flex h-min w-full flex-col gap-3 rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
|
|
{thread.rootEventId ? (
|
|
<Note.Child eventId={thread.rootEventId} isRoot />
|
|
) : null}
|
|
{thread.replyEventId ? (
|
|
<Note.Child eventId={thread.replyEventId} />
|
|
) : null}
|
|
<div className="inline-flex items-center justify-between">
|
|
<Link
|
|
to={`/events/${thread?.rootEventId || thread?.replyEventId}`}
|
|
className="self-start text-blue-500 hover:text-blue-600"
|
|
>
|
|
{t("note.showThread")}
|
|
</Link>
|
|
<button
|
|
type="button"
|
|
className="inline-flex size-6 items-center justify-center rounded-md bg-neutral-200 text-neutral-600 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-700"
|
|
>
|
|
<PinIcon className="size-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|