84 lines
2.8 KiB
TypeScript
84 lines
2.8 KiB
TypeScript
import { useArk, useProfile } from "@lume/ark";
|
|
import { SettingsIcon, UserIcon } from "@lume/icons";
|
|
import { cn, useNetworkStatus } from "@lume/utils";
|
|
import * as Avatar from "@radix-ui/react-avatar";
|
|
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
|
|
import { minidenticon } from "minidenticons";
|
|
import { useMemo } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import { Logout } from "./logout";
|
|
|
|
export function ActiveAccount() {
|
|
const ark = useArk();
|
|
const isOnline = useNetworkStatus();
|
|
const svgURI = useMemo(
|
|
() =>
|
|
`data:image/svg+xml;utf8,${encodeURIComponent(
|
|
minidenticon(ark.account.pubkey, 90, 50),
|
|
)}`,
|
|
[],
|
|
);
|
|
|
|
const { user } = useProfile(ark.account.pubkey);
|
|
|
|
return (
|
|
<DropdownMenu.Root>
|
|
<DropdownMenu.Trigger asChild>
|
|
<div className="relative">
|
|
<Avatar.Root>
|
|
<Avatar.Image
|
|
src={user?.picture || user?.image}
|
|
alt={ark.account.pubkey}
|
|
loading="lazy"
|
|
decoding="async"
|
|
style={{ contentVisibility: "auto" }}
|
|
className="aspect-square h-auto w-full rounded-xl object-cover"
|
|
/>
|
|
<Avatar.Fallback delayMs={150}>
|
|
<img
|
|
src={svgURI}
|
|
alt={ark.account.pubkey}
|
|
className="aspect-square h-auto w-full rounded-xl bg-black dark:bg-white"
|
|
/>
|
|
</Avatar.Fallback>
|
|
</Avatar.Root>
|
|
<span
|
|
className={cn(
|
|
"absolute bottom-0 right-0 block h-2 w-2 rounded-full ring-2 ring-neutral-100 dark:ring-neutral-900",
|
|
isOnline ? "bg-teal-500" : "bg-red-500",
|
|
)}
|
|
/>
|
|
</div>
|
|
</DropdownMenu.Trigger>
|
|
<DropdownMenu.Portal>
|
|
<DropdownMenu.Content
|
|
side="right"
|
|
sideOffset={5}
|
|
className="relative top-5 flex w-[200px] p-2 flex-col overflow-hidden rounded-2xl bg-white/50 dark:bg-black/50 ring-1 ring-black/10 dark:ring-white/10 backdrop-blur-2xl focus:outline-none"
|
|
>
|
|
<DropdownMenu.Item asChild>
|
|
<Link
|
|
to="/settings/profile"
|
|
className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
|
|
>
|
|
<UserIcon className="size-4" />
|
|
Edit profile
|
|
</Link>
|
|
</DropdownMenu.Item>
|
|
<DropdownMenu.Item asChild>
|
|
<Link
|
|
to="/settings/"
|
|
className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
|
|
>
|
|
<SettingsIcon className="size-4" />
|
|
Settings
|
|
</Link>
|
|
</DropdownMenu.Item>
|
|
<DropdownMenu.Separator className="h-px my-1 bg-black/10 dark:bg-white/10" />
|
|
<Logout />
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu.Portal>
|
|
</DropdownMenu.Root>
|
|
);
|
|
}
|