36 lines
1.6 KiB
TypeScript
36 lines
1.6 KiB
TypeScript
import { MuteButton } from '@components/channels/messages/muteButton';
|
|
import { ReplyButton } from '@components/channels/messages/replyButton';
|
|
import { MessageUser } from '@components/chats/messageUser';
|
|
|
|
import HideIcon from '@assets/icons/hide';
|
|
|
|
import { memo } from 'react';
|
|
|
|
const ChannelMessageItem = ({ data }: { data: any }) => {
|
|
return (
|
|
<div className="group relative flex h-min min-h-min w-full select-text flex-col px-5 py-2 hover:bg-black/20">
|
|
<div className="flex flex-col">
|
|
<MessageUser pubkey={data.pubkey} time={data.created_at} />
|
|
<div className="-mt-[17px] pl-[48px]">
|
|
<div className="flex flex-col gap-2">
|
|
<div className="prose prose-zinc max-w-none break-words text-sm leading-tight dark:prose-invert prose-p:m-0 prose-p:text-sm prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
|
|
{data.content}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="absolute -top-4 right-4 z-10 hidden group-hover:inline-flex">
|
|
<div className="inline-flex h-7 items-center justify-center gap-1 rounded bg-zinc-900 px-0.5 shadow-md shadow-black/20 ring-1 ring-zinc-800">
|
|
<ReplyButton id={data.id} pubkey={data.pubkey} content={data.content} />
|
|
<button className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-800">
|
|
<HideIcon className="h-4 w-4 text-zinc-400" />
|
|
</button>
|
|
<MuteButton pubkey={data.pubkey} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(ChannelMessageItem);
|