added channel message list and form

src/components/channels/browseChannelItem.tsx

@@ -0,0 +1,34 @@
+import { ImageWithFallback } from '@components/imageWithFallback';
+
+import { DEFAULT_AVATAR } from '@stores/constants';
+
+import { useRouter } from 'next/router';
+
+export const BrowseChannelItem = ({ data }: { data: any }) => {
+  const router = useRouter();
+  const channel = JSON.parse(data.content);
+
+  const openChannel = (id) => {
+    router.push({
+      pathname: '/channels/[id]',
+      query: { id: id },
+    });
+  };
+
+  return (
+    <div onClick={() => openChannel(data.eventId)} className="flex items-center gap-2 px-3 py-2 hover:bg-zinc-950">
+      <div className="relative h-11 w-11 shrink overflow-hidden rounded-md border border-white/10">
+        <ImageWithFallback
+          src={channel.picture || DEFAULT_AVATAR}
+          alt={data.id}
+          fill={true}
+          className="rounded-md object-cover"
+        />
+      </div>
+      <div className="flex w-full flex-1 flex-col items-start text-start">
+        <span className="truncate font-medium leading-tight text-zinc-200">{channel.name}</span>
+        <span className="text-sm leading-tight text-zinc-400">{channel.about}</span>
+      </div>
+    </div>
+  );
+};

src/components/channels/channelMessageItem.tsx

@@ -0,0 +1,22 @@
+import { MessageUser } from '@components/chats/messageUser';
+
+import { memo } from 'react';
+
+const ChannelMessageItem = ({ data }: { data: any }) => {
+  return (
+    <div className="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>
+  );
+};
+
+export default memo(ChannelMessageItem);

src/components/channels/channelMessageList.tsx

@@ -0,0 +1,39 @@
+import ChannelMessageItem from '@components/channels/channelMessageItem';
+
+import { useCallback, useRef } from 'react';
+import { Virtuoso } from 'react-virtuoso';
+
+export const ChannelMessageList = ({ data }: { data: any }) => {
+  const virtuosoRef = useRef(null);
+
+  const itemContent: any = useCallback(
+    (index: string | number) => {
+      return <ChannelMessageItem data={data[index]} />;
+    },
+    [data]
+  );
+
+  const computeItemKey = useCallback(
+    (index: string | number) => {
+      return data[index].id;
+    },
+    [data]
+  );
+
+  return (
+    <div className="h-full w-full">
+      <Virtuoso
+        ref={virtuosoRef}
+        data={data}
+        itemContent={itemContent}
+        computeItemKey={computeItemKey}
+        initialTopMostItemIndex={data.length - 1}
+        alignToBottom={true}
+        followOutput={true}
+        overscan={50}
+        increaseViewportBy={{ top: 200, bottom: 200 }}
+        className="scrollbar-hide h-full w-full overflow-y-auto"
+      />
+    </div>
+  );
+};