Communities and channels

src/components/Member/Member.tsx

@@ -1,7 +1,20 @@
 import type { Component } from "solid-js";
+import { IMemberProps } from "./types";
 
-const Member: Component = () => {
-    return <div></div>;
+const Member: Component<IMemberProps> = (props: IMemberProps) => {
+    return (
+        <li
+            class={`flex flex-row gap-4 items-center p-1 cursor-pointer rounded-lg ${props.active ? "bg-stone-700 hover:bg-stone-700" : "hover:bg-stone-800"}`}
+            onClick={() => props.onMemberClick(props.id)}
+        >
+            <div class="avatar">
+                <div class="w-9 rounded-full">
+                    <img src={props.avatar} />
+                </div>
+            </div>
+            <div class="font-bold">{props.username}</div>
+        </li>
+    );
 };
 
 export { Member };

src/components/Member/index.ts

@@ -1 +1,2 @@
 export * from "./Member";
+export * from "./types";

src/components/Member/types.ts

@@ -0,0 +1,9 @@
+interface IMemberProps {
+    id: string;
+    username: string;
+    avatar: string;
+    active: boolean;
+    onMemberClick: (id: string) => void;
+}
+
+export { type IMemberProps };