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

render reply and sub reply accordingly

Browse Source
This commit is contained in:
Ren Amamiya
2023-07-19 17:07:25 +07:00
parent 22c1eaa541
commit 29d40ed406
14 changed files with 118 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/shared/notes/replies/form.tsx
View File

@@ -1,13 +1,18 @@
import { useState } from 'react';
import { Button } from '@shared/button';
import { Image } from '@shared/image';
import { FULL_RELAYS } from '@stores/constants';
import { DEFAULT_AVATAR, FULL_RELAYS } from '@stores/constants';
import { useProfile } from '@utils/hooks/useProfile';
import { usePublish } from '@utils/hooks/usePublish';
import { displayNpub } from '@utils/shortenKey';
export function NoteReplyForm({ id }: { id: string }) {
export function NoteReplyForm({ id, pubkey }: { id: string; pubkey: string }) {
const publish = usePublish();
const { status, user } = useProfile(pubkey);
const [value, setValue] = useState('');
const submit = () => {
@@ -21,23 +26,39 @@ export function NoteReplyForm({ id }: { id: string }) {
};
return (
<div className="flex flex-col">
<div className="flex flex-col rounded-xl border-t border-zinc-800/50 bg-zinc-900">
<div className="relative w-full flex-1 overflow-hidden">
<textarea
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Reply to this thread..."
className="relative h-20 w-full resize-none rounded-md bg-transparent px-5 py-3 text-base !outline-none placeholder:text-zinc-400 dark:text-zinc-100 dark:placeholder:text-zinc-500"
className=" relative h-24 w-full resize-none rounded-md bg-transparent px-3 py-3 text-base !outline-none placeholder:text-zinc-400 dark:text-zinc-100 dark:placeholder:text-zinc-500"
spellCheck={false}
/>
</div>
<div className="w-full border-t border-zinc-800 px-5 py-3">
<div className="w-full border-t border-zinc-800 px-3 py-3">
{status === 'loading' ? (
<div>
<p>Loading...</p>
</div>
) : (
<div className="flex w-full items-center justify-between">
<div className="inline-flex items-center gap-3">
<div className="relative h-11 w-11 shrink-0 rounded">
<Image
src={user?.picture || user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className="h-11 w-11 rounded-lg bg-white object-cover"
/>
</div>
<div>
<p className="mb-1 text-sm leading-none text-zinc-400">Reply as</p>
<p className="text-sm font-medium leading-none text-zinc-100">
{user?.nip05 || user?.name || displayNpub(pubkey, 16)}
</p>
</div>
</div>
<div className="flex items-center gap-2">
<Button
onClick={() => submit()}