62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import { Spinner } from "@lume/ui";
|
|
import { Note } from "@/components/note";
|
|
import { Await, createFileRoute, defer } from "@tanstack/react-router";
|
|
import { Suspense } from "react";
|
|
import { Virtualizer } from "virtua";
|
|
|
|
export const Route = createFileRoute("/activity/$account/texts")({
|
|
loader: async ({ context, params }) => {
|
|
const ark = context.ark;
|
|
return { data: defer(ark.get_activities(params.account, "1")) };
|
|
},
|
|
component: Screen,
|
|
});
|
|
|
|
function Screen() {
|
|
const { data } = Route.useLoaderData();
|
|
|
|
return (
|
|
<Virtualizer overscan={3}>
|
|
<Suspense
|
|
fallback={
|
|
<div className="flex h-20 w-full flex-col items-center justify-center gap-1">
|
|
<button
|
|
type="button"
|
|
className="inline-flex items-center gap-2 text-sm font-medium"
|
|
disabled
|
|
>
|
|
<Spinner className="size-5" />
|
|
Loading...
|
|
</button>
|
|
</div>
|
|
}
|
|
>
|
|
<Await promise={data}>
|
|
{(events) =>
|
|
events.map((event) => (
|
|
<div
|
|
key={event.id}
|
|
className="flex flex-col gap-2 mb-3 bg-white dark:bg-black/20 backdrop-blur-lg rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50"
|
|
>
|
|
<Note.Provider event={event}>
|
|
<Note.Root>
|
|
<div className="px-3 h-14 flex items-center justify-between">
|
|
<Note.User />
|
|
<Note.Menu />
|
|
</div>
|
|
<Note.Activity className="px-3" />
|
|
<Note.Content className="px-3" quote={false} clean />
|
|
<div className="mt-3 flex items-center gap-4 h-14 px-3">
|
|
<Note.Open />
|
|
</div>
|
|
</Note.Root>
|
|
</Note.Provider>
|
|
</div>
|
|
))
|
|
}
|
|
</Await>
|
|
</Suspense>
|
|
</Virtualizer>
|
|
);
|
|
}
|