73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
import { useEvent } from "@lume/ark";
|
|
import { LoaderIcon } from "@lume/icons";
|
|
import { Box, Container, Note, User } from "@lume/ui";
|
|
import { createLazyFileRoute } from "@tanstack/react-router";
|
|
import { WindowVirtualizer } from "virtua";
|
|
import { ReplyList } from "./-components/replyList";
|
|
import { Event } from "@lume/types";
|
|
|
|
export const Route = createLazyFileRoute("/events/$eventId")({
|
|
component: Event,
|
|
});
|
|
|
|
function Event() {
|
|
const { eventId } = Route.useParams();
|
|
const { isLoading, isError, data } = useEvent(eventId);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex h-full w-full items-center justify-center">
|
|
<LoaderIcon className="size-5 animate-spin" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (isError) {
|
|
<div className="flex h-full w-full items-center justify-center">
|
|
<p>Not found.</p>
|
|
</div>;
|
|
}
|
|
|
|
return (
|
|
<WindowVirtualizer>
|
|
<Container withDrag>
|
|
<Box className="px-3 pt-3">
|
|
<MainNote data={data} />
|
|
{data ? <ReplyList eventId={eventId} /> : null}
|
|
</Box>
|
|
</Container>
|
|
</WindowVirtualizer>
|
|
);
|
|
}
|
|
|
|
function MainNote({ data }: { data: Event }) {
|
|
return (
|
|
<Note.Provider event={data}>
|
|
<Note.Root className="flex flex-col pb-3">
|
|
<User.Provider pubkey={data.pubkey}>
|
|
<User.Root className="mb-3 flex flex-1 items-center gap-3">
|
|
<User.Avatar className="size-11 shrink-0 rounded-full object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50" />
|
|
<div className="flex flex-1 flex-col">
|
|
<User.Name className="font-semibold text-neutral-900 dark:text-neutral-100" />
|
|
<div className="inline-flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400">
|
|
<User.Time time={data.created_at} />
|
|
<span>·</span>
|
|
<User.NIP05 />
|
|
</div>
|
|
</div>
|
|
</User.Root>
|
|
</User.Provider>
|
|
<Note.Thread className="mb-2" />
|
|
<Note.Content className="min-w-0" />
|
|
<div className="mt-4 flex items-center justify-between">
|
|
<div className="-ml-1 inline-flex items-center gap-4">
|
|
<Note.Repost />
|
|
<Note.Zap />
|
|
</div>
|
|
<Note.Menu />
|
|
</div>
|
|
</Note.Root>
|
|
</Note.Provider>
|
|
);
|
|
}
|