Message box

src/app/server/[id]/page.tsx

@@ -1,3 +1,4 @@
+import MessageBox from "@/components/MessageBox";
 import AppSidebar from "@/components/Sidebar";
 import { Button } from "@/components/ui/button";
 
@@ -15,7 +16,8 @@ export default async function Server(params: {params: Promise<{ id: string }>})
         { id: '4', name: 'voice-chat', kind: 'voice' },
       ]
     }}>
-      <Button>Hello {id}</Button>
+      <MessageBox />
+      <MessageBox />
     </AppSidebar>
   );
 }

src/components/MessageBox.tsx

@@ -0,0 +1,34 @@
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+
+function Message() {
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex gap-2">
+        <div className="w-8 h-8 rounded-full bg-gray-400" />
+        <div className="flex flex-col">
+          <span className="font-bold">User</span>
+          <span className="text-sm text-gray-500">
+            Hello, this is a message!
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function MessageBox() {
+  return (
+    <div className="h-screen w-full flex flex-col p-5">
+      <div className="w-full flex-1 overflow-y-scroll flex flex-col gap-2">
+        {Array.from({ length: 50 }).map((_, i) => (
+          <Message key={i} />
+        ))}
+      </div>
+      <div className="w-full flex gap-3">
+        <Input className="" placeholder="Type a message..." />
+        <Button>Send</Button>
+      </div>
+    </div>
+  );
+}