38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import { Link } from 'react-router-dom';
|
|
|
|
import { ActiveAccount } from '@shared/accounts/active';
|
|
import { SettingsIcon } from '@shared/icons';
|
|
import { Logout } from '@shared/logout';
|
|
import { NotificationModal } from '@shared/notification/modal';
|
|
|
|
import { useAccount } from '@utils/hooks/useAccount';
|
|
|
|
export function LumeBar() {
|
|
const { status, account } = useAccount();
|
|
|
|
return (
|
|
<div className="rounded-xl bg-white/10 p-2 backdrop-blur-xl">
|
|
<div className="flex items-center justify-between">
|
|
{status === 'loading' ? (
|
|
<>
|
|
<div className="group relative flex h-9 w-9 shrink animate-pulse items-center justify-center rounded-md bg-zinc-900" />
|
|
<div className="group relative flex h-9 w-9 shrink animate-pulse items-center justify-center rounded-md bg-zinc-900" />
|
|
</>
|
|
) : (
|
|
<>
|
|
<ActiveAccount data={account} />
|
|
<NotificationModal pubkey={account.pubkey} />
|
|
</>
|
|
)}
|
|
<Link
|
|
to="/settings/general"
|
|
className="inline-flex h-9 w-9 transform items-center justify-center rounded-md bg-white/20 active:translate-y-1"
|
|
>
|
|
<SettingsIcon className="h-4 w-4 text-white" />
|
|
</Link>
|
|
<Logout />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|