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

added user profile page

Browse Source
This commit is contained in:
Ren Amamiya
2023-03-19 17:16:36 +07:00
parent cbd9d77dac
commit fe6d510e18
3 changed files with 87 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/pages/profile/index.tsx
View File

@@ -1,19 +1,77 @@
import BaseLayout from '@layouts/base';
import WithSidebarLayout from '@layouts/withSidebar';
import { RelayContext } from '@components/contexts/relay';
import * as Tabs from '@radix-ui/react-tabs';
import useLocalStorage from '@rehooks/local-storage';
import { useRouter } from 'next/router';
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
import Image from 'next/image';
import { Author } from 'nostr-relaypool';
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useMemo } from 'react';
export default function Page() {
const router = useRouter();
const { id } = router.query;
const relayPool: any = useContext(RelayContext);
const [relays]: any = useLocalStorage('relays');
const [currentUser]: any = useLocalStorage('current-user');
const user = new Author(relayPool, relays, currentUser.id);
const userProfile = JSON.parse(currentUser.metadata);
return (
<div className="h-full w-full">
<p>{id}</p>
<div className="h-full w-full p-px">
<div className="relative">
<div className="relative h-64 w-full rounded-t-lg bg-zinc-800">
{userProfile.banner && (
<Image src={userProfile.banner} alt="user's banner" fill={true} className="h-full w-full object-cover" />
)}
</div>
<div className="relative -top-8 px-4">
<button className="relative h-16 w-16">
<Image src={userProfile.picture} alt="user's avatar" fill={true} className="rounded-lg object-cover" />
</button>
</div>
</div>
<div className="-mt-4 mb-8 px-4">
<div>
<div className="mb-3 flex flex-col">
<h3 className="text-xl font-bold leading-tight text-zinc-100">{userProfile.display_name}</h3>
<span className="leading-tight text-zinc-500">@{userProfile.username}</span>
</div>
<div className="prose prose-zinc leading-tight dark:prose-invert">{userProfile.about}</div>
</div>
</div>
<Tabs.Root className="flex w-full flex-col" defaultValue="notes">
<Tabs.List className="flex border-b border-zinc-800">
<Tabs.Trigger
className="flex h-10 flex-1 cursor-default select-none items-center justify-center px-5 text-sm font-medium leading-none text-zinc-400 outline-none hover:text-fuchsia-400 data-[state=active]:text-fuchsia-500 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current"
value="notes"
>
Notes
</Tabs.Trigger>
<Tabs.Trigger
className="flex h-10 flex-1 cursor-default select-none items-center justify-center px-5 text-sm font-medium text-zinc-400 outline-none placeholder:leading-none hover:text-fuchsia-400 data-[state=active]:text-fuchsia-500 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current"
value="followers"
>
Followers
</Tabs.Trigger>
<Tabs.Trigger
className="flex h-10 flex-1 cursor-default select-none items-center justify-center px-5 text-sm font-medium leading-none text-zinc-400 outline-none hover:text-fuchsia-400 data-[state=active]:text-fuchsia-500 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current"
value="following"
>
Following
</Tabs.Trigger>
</Tabs.List>
<Tabs.Content className="px-4" value="notes">
<p>Notes</p>
</Tabs.Content>
<Tabs.Content className="px-4" value="followers">
<p>Followers</p>
</Tabs.Content>
<Tabs.Content className="px-4" value="following">
<p>Following</p>
</Tabs.Content>
</Tabs.Root>
</div>
);
}