mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 19:46:34 +00:00
added user profile page
This commit is contained in:
parent
cbd9d77dac
commit
fe6d510e18
@ -16,6 +16,7 @@
|
|||||||
"@radix-ui/react-dialog": "^1.0.3",
|
"@radix-ui/react-dialog": "^1.0.3",
|
||||||
"@radix-ui/react-dropdown-menu": "^2.0.4",
|
"@radix-ui/react-dropdown-menu": "^2.0.4",
|
||||||
"@radix-ui/react-icons": "^1.2.0",
|
"@radix-ui/react-icons": "^1.2.0",
|
||||||
|
"@radix-ui/react-tabs": "^1.0.3",
|
||||||
"@rehooks/local-storage": "^2.4.4",
|
"@rehooks/local-storage": "^2.4.4",
|
||||||
"@supabase/supabase-js": "^2.10.0",
|
"@supabase/supabase-js": "^2.10.0",
|
||||||
"@tauri-apps/api": "^1.2.0",
|
"@tauri-apps/api": "^1.2.0",
|
||||||
|
@ -5,6 +5,7 @@ specifiers:
|
|||||||
'@radix-ui/react-dialog': ^1.0.3
|
'@radix-ui/react-dialog': ^1.0.3
|
||||||
'@radix-ui/react-dropdown-menu': ^2.0.4
|
'@radix-ui/react-dropdown-menu': ^2.0.4
|
||||||
'@radix-ui/react-icons': ^1.2.0
|
'@radix-ui/react-icons': ^1.2.0
|
||||||
|
'@radix-ui/react-tabs': ^1.0.3
|
||||||
'@rehooks/local-storage': ^2.4.4
|
'@rehooks/local-storage': ^2.4.4
|
||||||
'@supabase/supabase-js': ^2.10.0
|
'@supabase/supabase-js': ^2.10.0
|
||||||
'@tailwindcss/typography': ^0.5.9
|
'@tailwindcss/typography': ^0.5.9
|
||||||
@ -58,6 +59,7 @@ dependencies:
|
|||||||
'@radix-ui/react-dialog': 1.0.3_zula6vjvt3wdocc4mwcxqa6nzi
|
'@radix-ui/react-dialog': 1.0.3_zula6vjvt3wdocc4mwcxqa6nzi
|
||||||
'@radix-ui/react-dropdown-menu': 2.0.4_zula6vjvt3wdocc4mwcxqa6nzi
|
'@radix-ui/react-dropdown-menu': 2.0.4_zula6vjvt3wdocc4mwcxqa6nzi
|
||||||
'@radix-ui/react-icons': 1.2.0_react@18.2.0
|
'@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
|
'@rehooks/local-storage': 2.4.4_react@18.2.0
|
||||||
'@supabase/supabase-js': 2.10.0
|
'@supabase/supabase-js': 2.10.0
|
||||||
'@tauri-apps/api': 1.2.0
|
'@tauri-apps/api': 1.2.0
|
||||||
@ -1046,6 +1048,26 @@ packages:
|
|||||||
react: 18.2.0
|
react: 18.2.0
|
||||||
dev: false
|
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:
|
/@radix-ui/react-use-callback-ref/1.0.0_react@18.2.0:
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg== }
|
{ integrity: sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg== }
|
||||||
|
@ -1,19 +1,77 @@
|
|||||||
import BaseLayout from '@layouts/base';
|
import BaseLayout from '@layouts/base';
|
||||||
import WithSidebarLayout from '@layouts/withSidebar';
|
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 useLocalStorage from '@rehooks/local-storage';
|
||||||
import { useRouter } from 'next/router';
|
import Image from 'next/image';
|
||||||
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
|
import { Author } from 'nostr-relaypool';
|
||||||
|
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useMemo } from 'react';
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
const router = useRouter();
|
const relayPool: any = useContext(RelayContext);
|
||||||
const { id } = router.query;
|
|
||||||
|
|
||||||
|
const [relays]: any = useLocalStorage('relays');
|
||||||
const [currentUser]: any = useLocalStorage('current-user');
|
const [currentUser]: any = useLocalStorage('current-user');
|
||||||
|
|
||||||
|
const user = new Author(relayPool, relays, currentUser.id);
|
||||||
|
const userProfile = JSON.parse(currentUser.metadata);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-full w-full">
|
<div className="h-full w-full p-px">
|
||||||
<p>{id}</p>
|
<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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user