90 lines
4.0 KiB
TypeScript
90 lines
4.0 KiB
TypeScript
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
|
import * as Tooltip from '@radix-ui/react-tooltip';
|
|
import { createSearchParams, useNavigate } from 'react-router-dom';
|
|
|
|
import { FocusIcon, ReplyIcon } from '@shared/icons';
|
|
import { NoteReaction } from '@shared/notes/actions/reaction';
|
|
import { NoteRepost } from '@shared/notes/actions/repost';
|
|
import { NoteZap } from '@shared/notes/actions/zap';
|
|
|
|
import { WIDGET_KIND } from '@utils/constants';
|
|
import { useWidget } from '@utils/hooks/useWidget';
|
|
|
|
export function NoteActions({
|
|
event,
|
|
rootEventId,
|
|
canOpenEvent = true,
|
|
}: {
|
|
event: NDKEvent;
|
|
rootEventId?: string;
|
|
canOpenEvent?: boolean;
|
|
}) {
|
|
const { addWidget } = useWidget();
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<Tooltip.Provider>
|
|
<div className="flex h-14 items-center justify-between px-3">
|
|
{canOpenEvent && (
|
|
<div className="inline-flex items-center gap-3">
|
|
<Tooltip.Root delayDuration={150}>
|
|
<Tooltip.Trigger asChild>
|
|
<button
|
|
type="button"
|
|
onClick={() =>
|
|
addWidget.mutate({
|
|
kind: WIDGET_KIND.thread,
|
|
title: 'Thread',
|
|
content: event.id,
|
|
})
|
|
}
|
|
className="inline-flex h-7 w-max items-center justify-center gap-2 rounded-full bg-neutral-100 px-2 text-sm font-medium dark:bg-neutral-900"
|
|
>
|
|
<FocusIcon className="h-4 w-4" />
|
|
Open
|
|
</button>
|
|
</Tooltip.Trigger>
|
|
<Tooltip.Portal>
|
|
<Tooltip.Content className="-left-10 inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-200 px-3.5 text-sm text-neutral-900 will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade dark:bg-neutral-800 dark:text-neutral-100">
|
|
Open thread
|
|
<Tooltip.Arrow className="fill-neutral-200 dark:fill-neutral-800" />
|
|
</Tooltip.Content>
|
|
</Tooltip.Portal>
|
|
</Tooltip.Root>
|
|
</div>
|
|
)}
|
|
<div className="inline-flex items-center gap-10">
|
|
<Tooltip.Root delayDuration={150}>
|
|
<Tooltip.Trigger asChild>
|
|
<button
|
|
type="button"
|
|
onClick={() =>
|
|
navigate({
|
|
pathname: '/new/',
|
|
search: createSearchParams({
|
|
replyTo: event.id,
|
|
rootReplyTo: rootEventId,
|
|
}).toString(),
|
|
})
|
|
}
|
|
className="group inline-flex h-7 w-7 items-center justify-center text-neutral-600 dark:text-neutral-400"
|
|
>
|
|
<ReplyIcon className="h-5 w-5 group-hover:text-blue-500" />
|
|
</button>
|
|
</Tooltip.Trigger>
|
|
<Tooltip.Portal>
|
|
<Tooltip.Content className="-left-10 inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-200 px-3.5 text-sm text-neutral-900 will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade dark:bg-neutral-800 dark:text-neutral-100">
|
|
Quick reply
|
|
<Tooltip.Arrow className="fill-neutral-200 dark:fill-neutral-800" />
|
|
</Tooltip.Content>
|
|
</Tooltip.Portal>
|
|
</Tooltip.Root>
|
|
<NoteReaction event={event} />
|
|
<NoteRepost event={event} />
|
|
<NoteZap event={event} />
|
|
</div>
|
|
</div>
|
|
</Tooltip.Provider>
|
|
);
|
|
}
|