nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-18 03:03:31 +00:00
Code Issues 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -16,6 +16,7 @@
"@radix-ui/react-dialog": "^1.0.3",
"@radix-ui/react-dropdown-menu": "^2.0.4",
"@radix-ui/react-icons": "^1.2.0",
"@radix-ui/react-tabs": "^1.0.3",
"@rehooks/local-storage": "^2.4.4",
"@supabase/supabase-js": "^2.10.0",
"@tauri-apps/api": "^1.2.0",

22
pnpm-lock.yaml
View File

@ -5,6 +5,7 @@ specifiers:
'@radix-ui/react-dialog': ^1.0.3
'@radix-ui/react-dropdown-menu': ^2.0.4
'@radix-ui/react-icons': ^1.2.0
'@radix-ui/react-tabs': ^1.0.3
'@rehooks/local-storage': ^2.4.4
'@supabase/supabase-js': ^2.10.0
'@tailwindcss/typography': ^0.5.9
@ -58,6 +59,7 @@ dependencies:
'@radix-ui/react-dialog': 1.0.3_zula6vjvt3wdocc4mwcxqa6nzi
'@radix-ui/react-dropdown-menu': 2.0.4_zula6vjvt3wdocc4mwcxqa6nzi
'@radix-ui/react-icons': 1.2.0_react@18.2.0
'@radix-ui/react-tabs': 1.0.3_biqbaboplfbrettd7655fr4n2y
'@rehooks/local-storage': 2.4.4_react@18.2.0
'@supabase/supabase-js': 2.10.0
'@tauri-apps/api': 1.2.0
@ -1046,6 +1048,26 @@ packages:
react: 18.2.0
dev: false
/@radix-ui/react-tabs/1.0.3_biqbaboplfbrettd7655fr4n2y:
resolution:
{ integrity: sha512-4CkF/Rx1GcrusI/JZ1Rvyx4okGUs6wEenWA0RG/N+CwkRhTy7t54y7BLsWUXrAz/GRbBfHQg/Odfs/RoW0CiRA== }
peerDependencies:
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.21.0
'@radix-ui/primitive': 1.0.0
'@radix-ui/react-context': 1.0.0_react@18.2.0
'@radix-ui/react-direction': 1.0.0_react@18.2.0
'@radix-ui/react-id': 1.0.0_react@18.2.0
'@radix-ui/react-presence': 1.0.0_biqbaboplfbrettd7655fr4n2y
'@radix-ui/react-primitive': 1.0.2_biqbaboplfbrettd7655fr4n2y
'@radix-ui/react-roving-focus': 1.0.3_biqbaboplfbrettd7655fr4n2y
'@radix-ui/react-use-controllable-state': 1.0.0_react@18.2.0
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
dev: false
/@radix-ui/react-use-callback-ref/1.0.0_react@18.2.0:
resolution:
{ integrity: sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg== }

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>
);
}