reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update multi accounts bar

Browse Source
This commit is contained in:
Ren Amamiya
2023-05-06 09:14:59 +07:00
parent 30c39d27f5
commit b55b595b20
5 changed files with 60 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/shared/multiAccounts.tsx
View File

@@ -1,39 +1,57 @@
import ActiveAccount from '@lume/shared/accounts/active';
import InactiveAccount from '@lume/shared/accounts/inactive';
import BellIcon from '@lume/shared/icons/bell';
import PlusIcon from '@lume/shared/icons/plus';
import { APP_VERSION } from '@lume/stores/constants';
import { getAccounts } from '@lume/utils/storage';
import { getAccounts, getActiveAccount } from '@lume/utils/storage';
import useSWR from 'swr';
const fetcher = () => getAccounts();
const allFetcher = () => getAccounts();
const fetcher = () => getActiveAccount();
export default function MultiAccounts() {
const { data, error }: any = useSWR('allAccounts', fetcher);
const { data: accounts }: any = useSWR('allAccounts', allFetcher);
const { data: activeAccount }: any = useSWR('activeAccount', fetcher);
return (
<div className="flex h-full flex-col items-center justify-between pb-4 pt-3">
<div className="flex flex-col gap-3">
<>
{error && <div>failed to load</div>}
{!data ? (
<div className="group relative flex h-11 w-11 shrink animate-pulse cursor-pointer items-center justify-center rounded-lg bg-zinc-900"></div>
) : (
data.map((account: { is_active: number; pubkey: string }) => {
if (account.is_active === 1) {
return <ActiveAccount key={account.pubkey} user={account} />;
} else {
return <InactiveAccount key={account.pubkey} user={account} />;
}
})
)}
</>
<a
href="/onboarding"
className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-lg border-2 border-dashed border-zinc-600 hover:border-zinc-400"
>
<PlusIcon width={16} height={16} className="text-zinc-400 group-hover:text-zinc-200" />
</a>
<div className="flex flex-col items-center">
<div className="flex flex-col gap-3">
<>
{!activeAccount ? (
<div className="group relative flex h-10 w-10 shrink animate-pulse cursor-pointer items-center justify-center rounded-lg bg-zinc-900"></div>
) : (
<ActiveAccount user={activeAccount} />
)}
</>
<div>
<button
type="button"
className="group relative flex h-10 w-10 shrink cursor-pointer items-center justify-center rounded-lg bg-zinc-900 hover:bg-zinc-800"
>
<BellIcon width={16} height={16} className="text-zinc-400 group-hover:text-zinc-200" />
</button>
</div>
</div>
<div className="my-2 h-px w-2/3 bg-zinc-800"></div>
<div className="flex flex-col gap-3">
<>
{!accounts ? (
<div className="group relative flex h-10 w-10 shrink animate-pulse cursor-pointer items-center justify-center rounded-lg bg-zinc-900"></div>
) : (
accounts.map((account: { is_active: number; pubkey: string }) => (
<InactiveAccount key={account.pubkey} user={account} />
))
)}
</>
<button
type="button"
className="group relative flex h-10 w-10 shrink cursor-pointer items-center justify-center rounded-lg border-2 border-dashed border-transparent hover:border-zinc-600"
>
<PlusIcon width={16} height={16} className="text-zinc-400 group-hover:text-zinc-200" />
</button>
</div>
</div>
<div className="flex flex-col gap-0.5 text-center">
<span className="text-sm font-black uppercase leading-tight text-zinc-600">Lume</span>