mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43:30 +00:00
update multi accounts bar
This commit is contained in:
parent
30c39d27f5
commit
b55b595b20
@ -5,11 +5,11 @@ export default function ActiveAccount({ user }: { user: any }) {
|
||||
const userData = JSON.parse(user.metadata);
|
||||
|
||||
return (
|
||||
<button className="relative h-11 w-11 rounded-lg">
|
||||
<button className="relative h-10 w-10 rounded-lg">
|
||||
<Image
|
||||
src={userData.picture || DEFAULT_AVATAR}
|
||||
alt="user's avatar"
|
||||
className="h-11 w-11 rounded-lg object-cover"
|
||||
className="h-10 w-10 rounded-lg object-cover"
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
|
@ -5,11 +5,11 @@ export default function InactiveAccount({ user }: { user: any }) {
|
||||
const userData = JSON.parse(user.metadata);
|
||||
|
||||
return (
|
||||
<div className="relative h-11 w-11 shrink rounded-lg">
|
||||
<div className="relative h-10 w-10 shrink rounded-lg">
|
||||
<Image
|
||||
src={userData.picture || DEFAULT_AVATAR}
|
||||
alt="user's avatar"
|
||||
className="h-11 w-11 rounded-lg object-cover"
|
||||
className="h-10 w-10 rounded-lg object-cover"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
13
src/shared/icons/bell.tsx
Normal file
13
src/shared/icons/bell.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import { SVGProps } from 'react';
|
||||
|
||||
export default function BellIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path
|
||||
d="M16 18.25C15.3267 20.0159 13.7891 21.25 12 21.25C10.2109 21.25 8.67327 20.0159 8 18.25M20.5 18.25L18.9554 8.67345C18.4048 5.2596 15.458 2.75 12 2.75C8.54203 2.75 5.59523 5.2596 5.04461 8.67345L3.5 18.25H20.5Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
@ -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>
|
||||
|
@ -23,7 +23,7 @@ export async function getActiveAccount() {
|
||||
// get all accounts
|
||||
export async function getAccounts() {
|
||||
const db = await connect();
|
||||
return await db.select(`SELECT * FROM accounts ORDER BY created_at DESC;`);
|
||||
return await db.select(`SELECT * FROM accounts WHERE is_active = 0 ORDER BY created_at DESC;`);
|
||||
}
|
||||
|
||||
// create account
|
||||
|
Loading…
Reference in New Issue
Block a user