update channel

src/app/channel/components/members.tsx

@@ -1,44 +1,13 @@
-import MiniMember from "@app/channel/components/miniMember";
-
-import { channelMembersAtom } from "@stores/channel";
-
-import { useAtomValue } from "jotai";
-
-export default function ChannelMembers() {
-	const membersAsSet = useAtomValue(channelMembersAtom);
-	const membersAsArray = [...membersAsSet];
-	const miniMembersList = membersAsArray.slice(0, 4);
-	const totalMembers =
-		membersAsArray.length > 0
-			? `+${Intl.NumberFormat("en-US", {
-					notation: "compact",
-					maximumFractionDigits: 1,
-			  }).format(membersAsArray.length)}`
-			: 0;
+import { Member } from "@app/channel/components/member";
+import { useChannelMessages } from "@stores/channels";
+import { useEffect } from "react";
 
+export function ChannelMembers() {
 	return (
-		<div>
-			<div className="group flex -space-x-2 overflow-hidden hover:-space-x-1">
-				{miniMembersList.map((member, index) => (
-					<MiniMember key={`item-${index}`} pubkey={member} />
-				))}
-				{totalMembers ? (
-					<div className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-900 ring-2 ring-zinc-950 transition-all duration-150 ease-in-out group-hover:bg-zinc-800">
-						<span className="text-base font-medium text-zinc-400 group-hover:text-white">
-							{totalMembers}
-						</span>
-					</div>
-				) : (
-					<div>
-						<button
-							type="button"
-							className="inline-flex h-8 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-base text-white shadow-button"
-						>
-							Invite
-						</button>
-					</div>
-				)}
-			</div>
+		<div className="flex flex-wrap gap-1">
+			{[].map((member) => (
+				<Member key={member} pubkey={member} />
+			))}
 		</div>
 	);
 }