51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import type { EventWithReplies } from "@lume/types";
|
|
import { Spinner } from "@lume/ui";
|
|
import { cn } from "@lume/utils";
|
|
import { useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Reply } from "./reply";
|
|
import { LumeEvent } from "@lume/system";
|
|
|
|
export function ReplyList({
|
|
eventId,
|
|
className,
|
|
}: {
|
|
eventId: string;
|
|
className?: string;
|
|
}) {
|
|
const [t] = useTranslation();
|
|
const [data, setData] = useState<null | EventWithReplies[]>(null);
|
|
|
|
useEffect(() => {
|
|
async function getReplies() {
|
|
const events = await LumeEvent.getReplies(eventId);
|
|
setData(events);
|
|
}
|
|
getReplies();
|
|
}, [eventId]);
|
|
|
|
return (
|
|
<div className={cn("flex flex-col", className)}>
|
|
<div className="h-11 flex px-3 items-center text-sm font-semibold text-neutral-700 dark:text-neutral-300 border-t border-neutral-100 dark:border-neutral-900">
|
|
Replies ({data?.length ?? 0})
|
|
</div>
|
|
{!data ? (
|
|
<div className="flex h-16 items-center justify-center p-3">
|
|
<Spinner className="size-5" />
|
|
</div>
|
|
) : data.length === 0 ? (
|
|
<div className="flex w-full items-center justify-center">
|
|
<div className="flex flex-col items-center justify-center gap-2 py-6">
|
|
<h3 className="text-3xl">👋</h3>
|
|
<p className="leading-none text-neutral-600 dark:text-neutral-400">
|
|
{t("note.reply.empty")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
data.map((event) => <Reply key={event.id} event={event} />)
|
|
)}
|
|
</div>
|
|
);
|
|
}
|