add initial data page

This commit is contained in:
Ren Amamiya
2023-04-28 08:39:12 +07:00
parent 76bdeca4ab
commit 233a5bd2ad
7 changed files with 244 additions and 212 deletions

View File

@@ -1,7 +1,6 @@
import { AccountContext } from '@lume/shared/accountProvider';
import { MessageListItem } from '@lume/shared/chats/messageListItem';
import FormChat from '@lume/shared/form/chat';
import NewsfeedLayout from '@lume/shared/layouts/newsfeed';
import { RelayContext } from '@lume/shared/relaysProvider';
import { FULL_RELAYS } from '@lume/stores/constants';
import { usePageContext } from '@lume/utils/hooks/usePageContext';
@@ -46,41 +45,39 @@ export function Page() {
);
return (
<NewsfeedLayout>
<div className="relative flex h-full w-full flex-col justify-between rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
<div className="scrollbar-hide flex h-full w-full flex-col-reverse overflow-y-auto">
{error && <div>failed to load</div>}
{!data ? (
<div className="flex h-min min-h-min w-full animate-pulse select-text flex-col px-5 py-2 hover:bg-black/20">
<div className="flex flex-col">
<div className="group flex items-start gap-3">
<div className="bg-zinc relative h-9 w-9 shrink rounded-md bg-zinc-700"></div>
<div className="flex w-full flex-1 items-start justify-between">
<div className="flex items-baseline gap-2 text-sm">
<span className="h-2 w-16 bg-zinc-700"></span>
</div>
<div className="relative flex h-full w-full flex-col justify-between rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
<div className="scrollbar-hide flex h-full w-full flex-col-reverse overflow-y-auto">
{error && <div>failed to load</div>}
{!data ? (
<div className="flex h-min min-h-min w-full animate-pulse select-text flex-col px-5 py-2 hover:bg-black/20">
<div className="flex flex-col">
<div className="group flex items-start gap-3">
<div className="bg-zinc relative h-9 w-9 shrink rounded-md bg-zinc-700"></div>
<div className="flex w-full flex-1 items-start justify-between">
<div className="flex items-baseline gap-2 text-sm">
<span className="h-2 w-16 bg-zinc-700"></span>
</div>
</div>
<div className="-mt-[17px] pl-[48px]">
<div className="h-3 w-full bg-zinc-700"></div>
</div>
</div>
<div className="-mt-[17px] pl-[48px]">
<div className="h-3 w-full bg-zinc-700"></div>
</div>
</div>
) : (
sortMessages(data).map((message) => (
<MessageListItem
key={message.id}
data={message}
userPubkey={activeAccount.pubkey}
userPrivkey={activeAccount.privkey}
/>
))
)}
</div>
<div className="shrink-0 p-3">
<FormChat receiverPubkey={pubkey} />
</div>
</div>
) : (
sortMessages(data).map((message) => (
<MessageListItem
key={message.id}
data={message}
userPubkey={activeAccount.pubkey}
userPrivkey={activeAccount.privkey}
/>
))
)}
</div>
</NewsfeedLayout>
<div className="shrink-0 p-3">
<FormChat receiverPubkey={pubkey} />
</div>
</div>
);
}