Base layout

src/components/Channel/Channel.tsx

@@ -0,0 +1,7 @@
+import type { Component } from "solid-js";
+
+const Channel: Component = () => {
+    return <div></div>;
+};
+
+export default Channel;

src/components/Channel/index.ts

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

src/components/ChannelBar/ChannelBar.tsx

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

src/components/ChannelBar/index.ts

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

src/components/Community/Community.tsx

@@ -0,0 +1,7 @@
+import type { Component } from "solid-js";
+
+const Community: Component = () => {
+    return <div></div>;
+};
+
+export default Community;

src/components/Community/index.ts

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

src/components/Member/Member.tsx

@@ -0,0 +1,7 @@
+import type { Component } from "solid-js";
+
+const Member: Component = () => {
+    return <div></div>;
+};
+
+export default Member;

src/components/Member/index.ts

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

src/components/Message/Message.tsx

@@ -0,0 +1,23 @@
+import type { Component } from "solid-js";
+import { IMessageProps } from "./types";
+
+const Message: Component<IMessageProps> = (props: IMessageProps) => {
+    return (
+        <li class="list-row hover:bg-stone-700">
+            <div
+                class="avatar cursor-pointer"
+                onClick={() => props.onProfileClick(props.userId)}
+            >
+                <div class="w-10 rounded-full">
+                    <img src={props.profileImage} />
+                </div>
+            </div>
+            <div>
+                <div>{props.username}</div>
+                <p class="list-col-wrap text-xs">{props.message}</p>
+            </div>
+        </li>
+    );
+};
+
+export default Message;

src/components/Message/index.ts

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

src/components/Message/types.ts

@@ -0,0 +1,10 @@
+interface IMessageProps {
+    messageId: string;
+    message: string;
+    userId: string;
+    username: string;
+    profileImage: string;
+    onProfileClick: (userId: string) => void;
+}
+
+export { type IMessageProps };

src/components/MessageBar/MessageBar.tsx

@@ -0,0 +1,22 @@
+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>
+        </div>
+    );
+};
+
+export default MessageBar;

src/components/MessageBar/index.ts

@@ -0,0 +1 @@
+export * from "./MessageBar";