75 lines
2.3 KiB
TypeScript
75 lines
2.3 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
import { User } from "../../user";
|
|
import { useArk, useEvent } from "@lume/ark";
|
|
import { LinkIcon } from "@lume/icons";
|
|
|
|
export function MentionNote({
|
|
eventId,
|
|
openable = true,
|
|
}: {
|
|
eventId: string;
|
|
openable?: boolean;
|
|
}) {
|
|
const ark = useArk();
|
|
|
|
const { t } = useTranslation();
|
|
const { isLoading, isError, data } = useEvent(eventId);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div
|
|
contentEditable={false}
|
|
className="my-1 flex w-full cursor-default items-center justify-between rounded-2xl border border-black/10 p-3 dark:border-white/10"
|
|
>
|
|
<p>Loading...</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (isError || !data) {
|
|
return (
|
|
<div
|
|
contentEditable={false}
|
|
className="my-1 w-full cursor-default rounded-2xl border border-black/10 p-3 dark:border-white/10"
|
|
>
|
|
{t("note.error")}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="my-1 flex w-full cursor-default flex-col rounded-xl border border-black/10 px-3 pt-1 dark:border-white/10">
|
|
<User.Provider pubkey={data.pubkey}>
|
|
<User.Root className="flex h-10 items-center gap-2">
|
|
<User.Avatar className="size-6 shrink-0 rounded-full object-cover" />
|
|
<div className="inline-flex flex-1 items-center gap-2">
|
|
<User.Name className="font-semibold text-neutral-900 dark:text-neutral-100" />
|
|
<span className="text-neutral-600 dark:text-neutral-400">·</span>
|
|
<User.Time
|
|
time={data.created_at}
|
|
className="text-neutral-600 dark:text-neutral-400"
|
|
/>
|
|
</div>
|
|
</User.Root>
|
|
</User.Provider>
|
|
<div className="line-clamp-4 select-text whitespace-normal text-balance leading-normal">
|
|
{data.content}
|
|
</div>
|
|
{openable ? (
|
|
<div className="flex h-10 items-center justify-between">
|
|
<button
|
|
type="button"
|
|
onClick={() => ark.open_thread(data.id)}
|
|
className="inline-flex items-center gap-1 text-sm text-neutral-600 hover:text-blue-500 dark:text-neutral-400"
|
|
>
|
|
{t("note.showMore")}
|
|
<LinkIcon className="size-4" />
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="h-3" />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|