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

wip

Browse Source
This commit is contained in:
Ren Amamiya
2023-09-24 07:55:27 +07:00
parent c9bc7b81dd
commit 50f90ddcc2
12 changed files with 510 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/app/browse/components/userDrawer.tsx
View File

@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
import { useStorage } from '@libs/storage/provider';
import { PlusIcon } from '@shared/icons';
import { Image } from '@shared/image';
import { NIP05 } from '@shared/nip05';
import { TextNote } from '@shared/notes';
@@ -50,14 +51,26 @@ export const UserDrawer = memo(function UserDrawer({ pubkey }: { pubkey: string
return (
<Dialog.Root>
<Dialog.Trigger asChild>
<button type="button">
<User pubkey={pubkey} variant="avatar" />
</button>
</Dialog.Trigger>
<div className="group relative">
<Dialog.Trigger asChild>
<button type="button" className="relative z-10">
<User pubkey={pubkey} variant="avatar" />
</button>
</Dialog.Trigger>
<div className="absolute -bottom-14 left-0 flex flex-col opacity-0 transition-all duration-300 ease-smooth group-hover:-bottom-16 group-hover:opacity-100">
<div className="mt-4">
<button
type="button"
className="inline-flex h-12 w-12 items-center justify-center rounded-lg bg-white/10 backdrop-blur-xl hover:bg-white/20"
>
<PlusIcon className="h-4 w-4 text-white" />
</button>
</div>
</div>
</div>
<Dialog.Portal>
<Dialog.Content className="fixed right-0 top-0 z-50 flex h-full w-[400px] items-center justify-center">
<div className="h-full w-full overflow-y-auto border-l border-white/10 bg-white/20 px-3 py-3 backdrop-blur-xl">
<Dialog.Content className="fixed right-0 top-0 z-50 flex h-full w-[400px] items-center justify-center px-4 pb-4 pt-16">
<div className="h-full w-full overflow-y-auto rounded-lg border-t border-white/10 bg-white/20 px-3 py-3 backdrop-blur-xl">
{status === 'loading' ? (
<div>
<p>Loading...</p>

13
src/app/browse/index.tsx
View File

@@ -1,12 +1,14 @@
import { NavLink, Outlet } from 'react-router-dom';
import { twMerge } from 'tailwind-merge';
import { DotsPattern } from '@shared/icons';
export function BrowseScreen() {
return (
<div className="relative h-full w-full">
<div className="absolute left-0 right-0 top-4 flex w-full items-center justify-between px-3">
<div className="absolute left-0 right-0 top-4 z-30 flex w-full items-center justify-between px-3">
<div className="w-10" />
<div className="inline-flex gap-1 rounded-full border-t border-white/10 bg-white/20 p-1">
<div className="inline-flex gap-1 rounded-full border-t border-white/10 bg-white/20 p-1 backdrop-blur-xl">
<NavLink
to="/browse/"
className={({ isActive }) =>
@@ -32,7 +34,12 @@ export function BrowseScreen() {
</div>
<div className="w-10" />
</div>
<Outlet />
<div className="absolute z-10 h-full w-full">
<DotsPattern className="h-full w-full text-white/10" />
</div>
<div className="relative z-20">
<Outlet />
</div>
</div>
);
}

19
src/app/browse/users.tsx
View File

@@ -1,21 +1,24 @@
import { useMemo } from 'react';
import { UserDrawer } from '@app/browse/components/userDrawer';
import { useStorage } from '@libs/storage/provider';
import { User } from '@shared/user';
import { getMultipleRandom } from '@utils/transform';
export function BrowseUsersScreen() {
const { db } = useStorage();
const data = useMemo(() => getMultipleRandom(db.account.follows, 10), []);
return (
<div className="flex h-full w-full items-center justify-center">
<div>
<User pubkey={db.account.pubkey} variant="avatar" />
<div className="mt-4 flex flex-col gap-2">
{db.account.follows.map((user) => (
<UserDrawer key={user} pubkey={user} />
))}
</div>
<div>
<User pubkey={db.account.pubkey} variant="avatar" />
<div className="flex items-center gap-4">
{data.map((user) => (
<UserDrawer key={user} pubkey={user} />
))}
</div>
</div>
);