Communities and channels

src/components/Channel/Channel.tsx

@@ -1,7 +1,16 @@
 import type { Component } from "solid-js";
+import { IChannelProps } from "./types";
 
-const Channel: Component = () => {
-    return <div></div>;
+const Channel: Component<IChannelProps> = (props: IChannelProps) => {
+    return (
+        <li
+            class={`flex flex-row gap-2 items-center p-1 cursor-pointer rounded-lg ${props.active ? "bg-stone-700 hover:bg-stone-700" : "hover:bg-stone-800"}`}
+            onClick={() => props.onChannelClick(props.id)}
+        >
+            <div class="font-bold text-xl">&nbsp#</div>
+            <div class="font-bold">{props.name}</div>
+        </li>
+    );
 };
 
 export { Channel };

src/components/Channel/index.ts

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

src/components/Channel/types.ts

@@ -0,0 +1,8 @@
+interface IChannelProps {
+    id: string;
+    name: string;
+    active: boolean;
+    onChannelClick: (id: string) => void;
+}
+
+export { type IChannelProps };

src/components/ChannelBar/ChannelBar.tsx

@@ -1,9 +1,15 @@
 import type { Component } from "solid-js";
+import { IChannelBarProps } from "./types";
 
-const ChannelBar: Component = () => {
+const ChannelBar: Component<IChannelBarProps> = (props: IChannelBarProps) => {
     return (
         <div class="absolute w-full top-0 z-10">
-            <div class="bg-stone-800/25 backdrop-blur-md h-16 w-full shadow-bar p-2"></div>
+            <div class="flex flex-col justify-center bg-stone-800/25 backdrop-blur-md h-16 w-full shadow-bar px-5">
+                <h2 class="text-sm font-bold">
+                    {props.name ? `# ${props.name}` : undefined}
+                </h2>
+                <p class="text-xs">{props.description}</p>
+            </div>
         </div>
     );
 };

src/components/ChannelBar/index.ts

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

src/components/ChannelBar/types.ts

@@ -0,0 +1,7 @@
+interface IChannelBarProps {
+    id?: string;
+    name?: string;
+    description?: string;
+}
+
+export { type IChannelBarProps };

src/components/Community/Community.tsx

@@ -7,7 +7,9 @@ const Community: Component<ICommunityProps> = (props: ICommunityProps) => {
             class="avatar cursor-pointer"
             onClick={() => props.onCommunityClick(props.id)}
         >
-            <div class="w-full rounded-full">
+            <div
+                class={`w-full transition-[border-radius] duration-300 outline-stone-300 hover:outline-2 ${props.active ? "rounded-lg outline-2" : "rounded-4xl"}`}
+            >
                 <img src={props.avatar} />
             </div>
         </div>

src/components/Community/types.ts

@@ -2,6 +2,7 @@ interface ICommunityProps {
     id: string;
     name: string;
     avatar: string;
+    active: boolean;
     onCommunityClick: (id: string) => void;
 }
 

src/components/CommunityBar/CommunityBar.tsx

@@ -0,0 +1,19 @@
+import type { Component } from "solid-js";
+import { ICommunityBarProps } from "./types";
+
+const CommunityBar: Component<ICommunityBarProps> = (
+    props: ICommunityBarProps,
+) => {
+    return (
+        <div
+            class={`absolute w-full top-0 z-10 bg-cover bg-top bg-no-repeat bg-[url('${props.avatar}')]`}
+        >
+            <div class="flex flex-col justify-center bg-stone-800/25 backdrop-blur-md h-16 w-full shadow-bar px-5">
+                <h2 class="text-sm font-bold">{props.name}</h2>
+                <p class="text-xs">{props.description}</p>
+            </div>
+        </div>
+    );
+};
+
+export { CommunityBar };

src/components/CommunityBar/index.ts

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

src/components/CommunityBar/types.ts

@@ -0,0 +1,8 @@
+interface ICommunityBarProps {
+    id?: string;
+    name?: string;
+    description?: string;
+    avatar?: string;
+}
+
+export { type ICommunityBarProps };

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 };

src/components/Message/Message.tsx

@@ -3,7 +3,7 @@ import { IMessageProps } from "./types";
 
 const Message: Component<IMessageProps> = (props: IMessageProps) => {
     return (
-        <li class="list-row hover:bg-stone-700">
+        <li class="list-row p-3 hover:bg-stone-700">
             <div
                 class="avatar cursor-pointer"
                 onClick={() => props.onProfileClick(props.userId)}

src/components/MessageBar/MessageBar.tsx

@@ -1,4 +1,5 @@
 import type { Component } from "solid-js";
+import { state } from "../../store/state";
 
 const MessageBar: Component = () => {
     return (