62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import { NavArrowDownIcon } from "@lume/icons";
|
|
import { NDKEventWithReplies } from "@lume/types";
|
|
import * as Collapsible from "@radix-ui/react-collapsible";
|
|
import { useState } from "react";
|
|
import { twMerge } from "tailwind-merge";
|
|
import { Note } from "..";
|
|
import { ChildReply } from "./childReply";
|
|
|
|
export function Reply({
|
|
event,
|
|
}: {
|
|
event: NDKEventWithReplies;
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<Collapsible.Root open={open} onOpenChange={setOpen}>
|
|
<Note.Provider event={event}>
|
|
<Note.Root>
|
|
<div className="flex items-center justify-between px-3 h-14">
|
|
<Note.User className="flex-1 pr-1" />
|
|
<Note.Menu />
|
|
</div>
|
|
<Note.Content className="min-w-0 px-3" />
|
|
<div className="flex items-center justify-between px-3 -ml-1 h-14">
|
|
{event.replies?.length > 0 ? (
|
|
<Collapsible.Trigger asChild>
|
|
<div className="inline-flex items-center gap-1 ml-1 font-semibold text-blue-500 h-14">
|
|
<NavArrowDownIcon
|
|
className={twMerge(
|
|
"h-3 w-3",
|
|
open ? "rotate-180 transform" : "",
|
|
)}
|
|
/>
|
|
{`${event.replies?.length} ${
|
|
event.replies?.length === 1 ? "reply" : "replies"
|
|
}`}
|
|
</div>
|
|
</Collapsible.Trigger>
|
|
) : null}
|
|
<div className="inline-flex items-center gap-10">
|
|
<Note.Reply />
|
|
<Note.Reaction />
|
|
<Note.Repost />
|
|
<Note.Zap />
|
|
</div>
|
|
</div>
|
|
<div className={twMerge("px-3", open ? "pb-3" : "")}>
|
|
{event.replies?.length > 0 ? (
|
|
<Collapsible.Content>
|
|
{event.replies?.map((childEvent) => (
|
|
<ChildReply key={childEvent.id} event={childEvent} />
|
|
))}
|
|
</Collapsible.Content>
|
|
) : null}
|
|
</div>
|
|
</Note.Root>
|
|
</Note.Provider>
|
|
</Collapsible.Root>
|
|
);
|
|
}
|