Tailwind config and basic services

src/components/ChannelBar/ChannelBar.tsx

@@ -1,7 +1,11 @@
 import type { Component } from "solid-js";
 
 const ChannelBar: Component = () => {
-    return <div class="bg-stone-800 h-16 shadow-bar z-10"></div>;
+    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>
+    );
 };
 
 export default ChannelBar;

src/components/Community/Community.tsx

@@ -1,7 +1,17 @@
 import type { Component } from "solid-js";
+import { ICommunityProps } from "./types";
 
-const Community: Component = () => {
-    return <div></div>;
+const Community: Component<ICommunityProps> = (props: ICommunityProps) => {
+    return (
+        <div
+            class="avatar cursor-pointer"
+            onClick={() => props.onCommunityClick(props.id)}
+        >
+            <div class="w-full rounded-full">
+                <img src={props.avatar} />
+            </div>
+        </div>
+    );
 };
 
 export default Community;

src/components/Community/index.ts

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

src/components/Community/types.ts

@@ -0,0 +1,8 @@
+interface ICommunityProps {
+    id: string;
+    name: string;
+    avatar: string;
+    onCommunityClick: (id: string) => void;
+}
+
+export { type ICommunityProps };

src/components/Message/Message.tsx

@@ -9,7 +9,7 @@ const Message: Component<IMessageProps> = (props: IMessageProps) => {
                 onClick={() => props.onProfileClick(props.userId)}
             >
                 <div class="w-10 rounded-full">
-                    <img src={props.profileImage} />
+                    <img src={props.avatar} />
                 </div>
             </div>
             <div>

src/components/Message/types.ts

@@ -3,7 +3,7 @@ interface IMessageProps {
     message: string;
     userId: string;
     username: string;
-    profileImage: string;
+    avatar: string;
     onProfileClick: (userId: string) => void;
 }
 

src/components/MessageBar/MessageBar.tsx

@@ -2,18 +2,14 @@ import type { Component } from "solid-js";
 
 const MessageBar: Component = () => {
     return (
-        <div class="bg-stone-800 h-16 shadow-bar z-10 p-2">
-            <div class="join w-full h-full">
-                <div class="w-full h-full">
-                    <label class="input validator join-item w-full h-full">
-                        <input
-                            type="text"
-                            placeholder="Write a text message..."
-                            required
-                        />
-                    </label>
-                </div>
-                <button class="btn btn-neutral join-item h-full">Send</button>
+        <div class="absolute w-full bottom-0 p-4 z-10">
+            <div class="bg-stone-800/25 backdrop-blur-lg h-16 shadow-bar p-2 flex flex-row gap-2 rounded-full">
+                <label class="bg-stone-800/50 backdrop-blur-lg input w-full h-full rounded-full focus:border-none outline-none">
+                    <input type="text" placeholder="Send a message..." />
+                </label>
+                <button class="bg-black/50 backdrop-blur-lg btn btn-neutral h-full rounded-full">
+                    Send
+                </button>
             </div>
         </div>
     );