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

added account menu

Browse Source
This commit is contained in:
Ren Amamiya
2023-03-19 08:54:17 +07:00
parent 40dd552ad1
commit cbd9d77dac
6 changed files with 217 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/columns/account/active.tsx
View File

@@ -1,11 +1,15 @@
import { DatabaseContext } from '@components/contexts/database';
import { RelayContext } from '@components/contexts/relay';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { AvatarIcon, ExitIcon, GearIcon } from '@radix-ui/react-icons';
import useLocalStorage from '@rehooks/local-storage';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { memo, useCallback, useContext, useMemo } from 'react';
export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }) {
const router = useRouter();
const userData = JSON.parse(user.metadata);
const { db }: any = useContext(DatabaseContext);
@@ -14,6 +18,13 @@ export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }
const [relays]: any = useLocalStorage('relays');
const [currentUser]: any = useLocalStorage('current-user');
const openProfile = () => {
router.push({
pathname: '/profile',
query: { id: currentUser.id },
});
};
// save follows to database
const insertFollows = useCallback(
async (follows) => {
@@ -52,8 +63,50 @@ export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }
}, [currentUser.id, insertFollows, relayPool, relays]);
return (
<div className="relative h-11 w-11 shrink rounded-lg ring-1 ring-fuchsia-500 ring-offset-2 ring-offset-black">
<Image src={userData.picture} alt="user's avatar" fill={true} className="rounded-lg object-cover" />
</div>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild>
<button className="relative h-11 w-11 shrink rounded-lg ring-1 ring-fuchsia-500 ring-offset-2 ring-offset-black">
<Image src={userData.picture} alt="user's avatar" fill={true} className="rounded-lg object-cover" />
</button>
</DropdownMenu.Trigger>
<DropdownMenu.Portal>
<DropdownMenu.Content
className="min-w-[220px] rounded-lg bg-zinc-800 p-1.5 shadow-lg shadow-black/50 will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
side="right"
sideOffset={5}
align="start"
>
<DropdownMenu.Item
onClick={() => openProfile()}
className="group relative flex h-7 select-none items-center rounded-sm px-1 pl-7 text-sm leading-none text-zinc-400 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-700 data-[highlighted]:text-fuchsia-500"
>
<div className="absolute left-0 inline-flex w-6 items-center justify-center">
<AvatarIcon />
</div>
Open profile
</DropdownMenu.Item>
<DropdownMenu.Item className="group relative flex h-7 select-none items-center rounded px-1 pl-7 text-sm leading-none text-zinc-400 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-700 data-[highlighted]:text-fuchsia-500">
Update profile
</DropdownMenu.Item>
<DropdownMenu.Item className="group relative flex h-7 select-none items-center rounded px-1 pl-7 text-sm leading-none text-zinc-400 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-700 data-[highlighted]:text-fuchsia-500">
Copy public key
</DropdownMenu.Item>
<DropdownMenu.Separator className="m-1 h-px bg-zinc-700/50" />
<DropdownMenu.Item className="group relative flex h-7 select-none items-center rounded px-1 pl-7 text-sm leading-none text-zinc-400 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-700 data-[highlighted]:text-fuchsia-500">
<div className="absolute left-0 inline-flex w-6 items-center justify-center">
<GearIcon />
</div>
Settings
</DropdownMenu.Item>
<DropdownMenu.Item className="group relative flex h-7 select-none items-center rounded px-1 pl-7 text-sm leading-none text-zinc-400 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-700 data-[highlighted]:text-fuchsia-500">
<div className="absolute left-0 inline-flex w-6 items-center justify-center">
<ExitIcon />
</div>
Logout
</DropdownMenu.Item>
<DropdownMenu.Arrow className="fill-zinc-800" />
</DropdownMenu.Content>
</DropdownMenu.Portal>
</DropdownMenu.Root>
);
});

2
src/components/columns/navigator/newsfeed/index.tsx
View File

@@ -9,7 +9,7 @@ export default function Newsfeed() {
return (
<Collapsible.Root open={open} onOpenChange={setOpen}>
<div className="flex flex-col px-2">
<div className="flex flex-col gap-1 px-2">
<Collapsible.Trigger className="flex cursor-pointer items-center gap-2 rounded-md py-1 px-2 hover:bg-zinc-900">
<div
className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${