restructured and clean up
This commit is contained in:
Ren Amamiya
25
src/components/columns/account/account.tsx
Normal file
25
src/components/columns/account/account.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import Image from 'next/image';
|
||||
import { memo } from 'react';
|
||||
|
||||
export const Account = memo(function Account({ user, current }: { user: any; current: string }) {
|
||||
const userData = JSON.parse(user.metadata);
|
||||
|
||||
const setCurrentUser = () => {
|
||||
console.log('clicked');
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={() => setCurrentUser()}
|
||||
className={`relative h-11 w-11 shrink overflow-hidden rounded-full ${
|
||||
current === user.pubkey ? 'ring-1 ring-fuchsia-500 ring-offset-4 ring-offset-black' : ''
|
||||
}`}
|
||||
>
|
||||
{userData?.picture !== undefined ? (
|
||||
<Image src={userData.picture} alt="user's avatar" fill={true} className="rounded-full object-cover" />
|
||||
) : (
|
||||
<div className="h-11 w-11 animate-pulse rounded-full bg-zinc-700" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
});
|
||||
43
src/components/columns/account/index.tsx
Normal file
43
src/components/columns/account/index.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import { Account } from '@components/columns/account/account';
|
||||
|
||||
import LumeSymbol from '@assets/icons/Lume';
|
||||
import { PlusIcon } from '@radix-ui/react-icons';
|
||||
import { useLocalStorage } from '@rehooks/local-storage';
|
||||
import Link from 'next/link';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import Database from 'tauri-plugin-sql-api';
|
||||
|
||||
export default function AccountColumn() {
|
||||
const [users, setUsers] = useState([]);
|
||||
const [currentUser]: any = useLocalStorage('current-user');
|
||||
|
||||
const getAccounts = useCallback(async () => {
|
||||
const db = await Database.load('sqlite:lume.db');
|
||||
const result: any = await db.select('SELECT * FROM accounts');
|
||||
|
||||
setUsers(result);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
getAccounts().catch(console.error);
|
||||
}, [getAccounts]);
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col items-center justify-between px-2 pt-12 pb-4">
|
||||
<div className="flex flex-col gap-4">
|
||||
{users.map((user, index) => (
|
||||
<Account key={index} user={user} current={currentUser.pubkey} />
|
||||
))}
|
||||
<Link
|
||||
href="/onboarding"
|
||||
className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center overflow-hidden rounded-full border-2 border-dashed border-zinc-600 hover:border-zinc-400"
|
||||
>
|
||||
<PlusIcon className="h-4 w-4 text-zinc-400 group-hover:text-zinc-200" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<LumeSymbol className="h-8 w-auto text-zinc-700" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
116
src/components/columns/navigator/createPost.tsx
Normal file
116
src/components/columns/navigator/createPost.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
import { RelayContext } from '@components/contexts/relay';
|
||||
|
||||
import { dateToUnix } from '@utils/getDate';
|
||||
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
import { useLocalStorage } from '@rehooks/local-storage';
|
||||
import * as commands from '@uiw/react-md-editor/lib/commands';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { getEventHash, signEvent } from 'nostr-tools';
|
||||
import { useContext, useState } from 'react';
|
||||
|
||||
const MDEditor = dynamic(() => import('@uiw/react-md-editor').then((mod) => mod.default), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
export default function CreatePost() {
|
||||
const relayPool: any = useContext(RelayContext);
|
||||
const [relays]: any = useLocalStorage('relays');
|
||||
|
||||
const [value, setValue] = useState('');
|
||||
|
||||
const [currentUser]: any = useLocalStorage('current-user');
|
||||
const pubkey = currentUser.pubkey;
|
||||
const privkey = currentUser.privkey;
|
||||
|
||||
const postButton = {
|
||||
name: 'post',
|
||||
keyCommand: 'post',
|
||||
buttonProps: { className: 'cta-btn', 'aria-label': 'Post a message' },
|
||||
icon: (
|
||||
<div className="relative inline-flex h-10 w-16 transform cursor-pointer overflow-hidden rounded bg-zinc-900 px-2.5 ring-zinc-500/50 ring-offset-zinc-900 will-change-transform focus:outline-none focus:ring-1 focus:ring-offset-2 active:translate-y-1">
|
||||
<span className="absolute inset-px z-10 inline-flex items-center justify-center rounded bg-zinc-900 text-zinc-200">
|
||||
Post
|
||||
</span>
|
||||
<span className="absolute inset-0 z-0 scale-x-[2.0] blur before:absolute before:inset-0 before:top-1/2 before:aspect-square before:animate-disco before:bg-gradient-conic before:from-gray-300 before:via-fuchsia-600 before:to-orange-600"></span>
|
||||
</div>
|
||||
),
|
||||
execute: (state: { text: any }) => {
|
||||
const message = state.text;
|
||||
|
||||
if (message.length > 0) {
|
||||
const event: any = {
|
||||
content: message,
|
||||
created_at: dateToUnix(),
|
||||
kind: 1,
|
||||
pubkey: pubkey,
|
||||
tags: [],
|
||||
};
|
||||
event.id = getEventHash(event);
|
||||
event.sig = signEvent(event, privkey);
|
||||
|
||||
relayPool.publish(event, relays);
|
||||
setValue('');
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog.Root>
|
||||
<Dialog.Trigger asChild>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="relative h-16 shrink-0 before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-blue-500 before:opacity-0 before:ring-2 before:ring-blue-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-blue-500/100 dark:focus-within:after:shadow-blue-500/20">
|
||||
<textarea
|
||||
readOnly
|
||||
placeholder="What's your thought?"
|
||||
className="relative h-16 w-full resize-none rounded-lg border border-black/5 px-3.5 py-3 text-sm shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
<button className="inline-flex h-9 w-full items-center justify-center rounded-lg border border-white/10 bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))] from-gray-300 via-fuchsia-600 to-orange-600 text-sm font-semibold shadow-input">
|
||||
<span className="drop-shadow-lg">Post</span>
|
||||
</button>
|
||||
</div>
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm data-[state=open]:animate-overlayShow" />
|
||||
<Dialog.Content className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center">
|
||||
<div className="relative w-full max-w-2xl transform overflow-hidden rounded-lg text-zinc-100 shadow-modal transition-all">
|
||||
<div className="absolute top-0 left-0 h-full w-full bg-black bg-opacity-20 backdrop-blur-lg"></div>
|
||||
<div className="absolute bottom-0 left-0 h-24 w-full border-t border-white/10 bg-zinc-900"></div>
|
||||
<div className="relative z-10 px-4 pt-4 pb-2">
|
||||
<MDEditor
|
||||
value={value}
|
||||
preview={'edit'}
|
||||
height={200}
|
||||
minHeight={200}
|
||||
visibleDragbar={false}
|
||||
highlightEnable={false}
|
||||
defaultTabEnable={true}
|
||||
autoFocus={true}
|
||||
commands={[
|
||||
commands.bold,
|
||||
commands.italic,
|
||||
commands.strikethrough,
|
||||
commands.divider,
|
||||
commands.checkedListCommand,
|
||||
commands.unorderedListCommand,
|
||||
commands.orderedListCommand,
|
||||
commands.divider,
|
||||
commands.link,
|
||||
commands.image,
|
||||
]}
|
||||
extraCommands={[postButton]}
|
||||
textareaProps={{
|
||||
placeholder: "What's your thought?",
|
||||
}}
|
||||
onChange={(val) => setValue(val)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
74
src/components/columns/navigator/index.tsx
Normal file
74
src/components/columns/navigator/index.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import ActiveLink from '@components/activeLink';
|
||||
import CreatePost from '@components/columns/navigator/createPost';
|
||||
import { UserDropdownMenu } from '@components/columns/navigator/userDropdownMenu';
|
||||
|
||||
import { PlusIcon } from '@radix-ui/react-icons';
|
||||
import { useLocalStorage } from '@rehooks/local-storage';
|
||||
|
||||
export default function NavigatorColumn() {
|
||||
const [currentUser]: any = useLocalStorage('current-user');
|
||||
const profile = JSON.parse(currentUser.metadata);
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col flex-wrap justify-between overflow-hidden px-2 pt-3 pb-4">
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* Create post */}
|
||||
<div className="flex flex-col rounded-lg bg-zinc-900 ring-1 ring-white/10">
|
||||
<div className="flex flex-col p-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<h5 className="font-semibold leading-tight text-zinc-100">{profile.display_name || ''}</h5>
|
||||
<UserDropdownMenu pubkey={currentUser.pubkey} />
|
||||
</div>
|
||||
<span className="text-sm leading-tight text-zinc-500">@{profile.username || ''}</span>
|
||||
</div>
|
||||
<div className="p-2">
|
||||
<CreatePost />
|
||||
</div>
|
||||
</div>
|
||||
{/* Newsfeed */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center justify-between px-2">
|
||||
<h3 className="text-sm font-bold text-zinc-400">Newsfeed</h3>
|
||||
<button
|
||||
type="button"
|
||||
className="group flex h-6 w-6 items-center justify-center rounded-full hover:bg-zinc-900"
|
||||
>
|
||||
<PlusIcon className="h-3 w-3 text-zinc-400 group-hover:text-zinc-100" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 text-zinc-500">
|
||||
<ActiveLink
|
||||
href={`/newsfeed/following`}
|
||||
activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white"
|
||||
className="flex h-10 items-center gap-1 rounded-lg px-2.5 text-sm font-medium hover:bg-zinc-900"
|
||||
>
|
||||
<span>#</span>
|
||||
<span>following</span>
|
||||
</ActiveLink>
|
||||
<ActiveLink
|
||||
href={`/newsfeed/global`}
|
||||
activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white"
|
||||
className="flex h-10 items-center gap-1 rounded-lg px-2.5 text-sm font-medium hover:bg-zinc-900"
|
||||
>
|
||||
<span>#</span>
|
||||
<span>global</span>
|
||||
</ActiveLink>
|
||||
</div>
|
||||
</div>
|
||||
{/* Messages */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center justify-between px-2">
|
||||
<h3 className="text-sm font-bold text-zinc-400">Direct Messages</h3>
|
||||
<button
|
||||
type="button"
|
||||
className="group flex h-6 w-6 items-center justify-center rounded-full hover:bg-zinc-900"
|
||||
>
|
||||
<PlusIcon className="h-3 w-3 text-zinc-400 group-hover:text-zinc-100" />
|
||||
</button>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
61
src/components/columns/navigator/userDropdownMenu.tsx
Normal file
61
src/components/columns/navigator/userDropdownMenu.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
||||
import { DotsHorizontalIcon } from '@radix-ui/react-icons';
|
||||
import { writeText } from '@tauri-apps/api/clipboard';
|
||||
import { useRouter } from 'next/router';
|
||||
import { nip19 } from 'nostr-tools';
|
||||
import { memo } from 'react';
|
||||
|
||||
export const UserDropdownMenu = memo(function ProfileMenu({ pubkey }: { pubkey: string }) {
|
||||
const router = useRouter();
|
||||
|
||||
const viewProfile = () => {
|
||||
router.push(`/profile/${pubkey}`);
|
||||
};
|
||||
|
||||
const updateProfile = () => {
|
||||
router.push('/profile/update');
|
||||
};
|
||||
|
||||
const copyPubkey = async () => {
|
||||
const npub = nip19.npubEncode(pubkey);
|
||||
await writeText(npub);
|
||||
};
|
||||
|
||||
return (
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<button className="rounded-lg p-1 hover:bg-zinc-800">
|
||||
<DotsHorizontalIcon className="h-4 w-4 text-zinc-300" />
|
||||
</button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content
|
||||
className="min-w-[220px] rounded-md border border-white/20 bg-zinc-800 p-1 shadow-lg shadow-black/30 will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
|
||||
sideOffset={2}
|
||||
>
|
||||
<DropdownMenu.Item
|
||||
onClick={() => viewProfile()}
|
||||
className="group relative flex h-[30px] select-none items-center rounded px-1 pl-6 text-sm leading-none text-zinc-100 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-700 data-[highlighted]:text-fuchsia-400 data-[disabled]:text-zinc-400"
|
||||
>
|
||||
View profile
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
onClick={() => updateProfile()}
|
||||
className="group relative flex h-[30px] select-none items-center rounded px-1 pl-6 text-sm leading-none text-zinc-100 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-700 data-[highlighted]:text-fuchsia-400 data-[disabled]:text-zinc-400"
|
||||
>
|
||||
Update profile
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
onClick={() => copyPubkey()}
|
||||
className="group relative flex h-[30px] select-none items-center rounded px-1 pl-6 text-sm leading-none text-zinc-100 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-700 data-[highlighted]:text-fuchsia-400 data-[disabled]:text-zinc-400"
|
||||
>
|
||||
Copy public key
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item className="group relative flex h-[30px] select-none items-center rounded px-1 pl-6 text-sm leading-none text-zinc-100 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-700 data-[highlighted]:text-fuchsia-400 data-[disabled]:text-zinc-400">
|
||||
Log out
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu.Root>
|
||||
);
|
||||
});
|
||||
Reference in New Issue
Block a user