Improved message box

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

@@ -1,22 +1,35 @@
 import MessageBox from "@/components/MessageBox";
 import AppSidebar from "@/components/Sidebar";
 
-export default async function Server(params: {params: Promise<{ id: string }>}) {
+export default async function Server(params: {
+  params: Promise<{ id: string }>;
+}) {
   const { id } = await params.params;
 
   return (
-    <AppSidebar server={{
-      id: 'bro',
-      name: 'Bro',
-      channels: [
-        { id: '1', name: 'general', kind: 'text' },
-        { id: '2', name: 'random', kind: 'text' },
-        { id: '3', name: 'help', kind: 'text' },
-        { id: '4', name: 'voice-chat', kind: 'voice' },
-      ]
-    }}>
-      <MessageBox />
-      <MessageBox />
+    <AppSidebar
+      server={{
+        id: "bro",
+        name: "Bro",
+        channels: [
+          { id: "1", name: "general", kind: "text" },
+          { id: "2", name: "random", kind: "text" },
+          { id: "3", name: "help", kind: "text" },
+          { id: "4", name: "voice-chat", kind: "voice" },
+        ],
+      }}
+    >
+      <MessageBox
+        messages={[
+          {
+            id: "1",
+            authorId: "user1",
+            content: "Hello, this is a test message!",
+            channelId: "1",
+            timestamp: new Date(),
+          },
+        ]}
+      />
     </AppSidebar>
   );
 }

src/components/MessageBox.tsx

@@ -1,36 +1,67 @@
+"use client";
+
+import Message from "@/types/message";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
+import * as emoji from "emoji-picker-react";
+import EmojiPicker from "emoji-picker-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+import { SmilePlusIcon } from "lucide-react";
+import { useState } from "react";
 
-function Message() {
+function MessageContainer({ message }: { message: 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 flex gap-1 items-center">
-            User <p className="text-neutral-500 text-xs">26/8/25, 12:45 AM</p>
+            {message.authorId}
+            <p className="text-neutral-500 text-xs">26/8/25, 12:45 AM</p>
           </span>
 
-          <span className="text-sm text-muted-foreground">
-            Hello, this is a message!
-          </span>
+          <span className="text-sm text-foreground/85">{message.content}</span>
         </div>
       </div>
     </div>
   );
 }
 
-export default function MessageBox() {
+export default function MessageBox({ messages }: { messages: Message[] }) {
+  const [text, setText] = useState("");
+
   return (
     <div className="h-screen w-full flex flex-col p-5 gap-5">
       <div className="w-full flex-1 overflow-y-scroll flex gap-2 flex-col-reverse">
-        {Array.from({ length: 50 }).map((_, i) => (
-          <Message key={i} />
+        {messages.map((msg) => (
+          <MessageContainer key={msg.id} message={msg} />
         ))}
       </div>
       <div className="w-full flex gap-3">
-        <Input className="" placeholder="Type a message..." />
-        <Button>Send</Button>
+        <Input
+          className=""
+          placeholder="Type a message..."
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+        />
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="secondary">
+              <SmilePlusIcon />
+            </Button>
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent className="">
+            <EmojiPicker
+              onEmojiClick={(e) => setText(text + e.emoji)}
+              theme={emoji.Theme.DARK}
+            />
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
     </div>
   );

src/components/Sidebar.tsx

@@ -15,7 +15,7 @@ import {
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from "./ui/dropdown-menu";
-import Server from "@/types/Server";
+import Server from "@/types/server";
 
 export default function AppSidebar({
   server,
@@ -24,8 +24,8 @@ export default function AppSidebar({
   server?: Server;
   children: React.ReactNode;
 }>) {
-  return (
-    server ? <SidebarProvider defaultOpen>
+  return server ? (
+    <SidebarProvider defaultOpen>
       <Sidebar>
         <SidebarHeader>
           <SidebarMenu>
@@ -53,14 +53,15 @@ export default function AppSidebar({
         <SidebarContent className="px-2">
           {server.channels.map((channel) => (
             <SidebarMenuButton key={channel.id} className="gap-1.5">
-              {channel.kind === 'voice' ? <MicIcon /> : <HashIcon />}
+              {channel.kind === "voice" ? <MicIcon /> : <HashIcon />}
               {channel.name}
             </SidebarMenuButton>
           ))}
         </SidebarContent>
       </Sidebar>
       {children}
-    </SidebarProvider> :
+    </SidebarProvider>
+  ) : (
     children
   );
 }

src/types/Server.ts

@@ -1,11 +1,7 @@
-export interface Channel {
-  id: string;
-  name: string;
-  kind: "text" | "voice";
-}
+import Channel from "./channel";
 
 export default interface Server {
   id: string;
   name: string;
   channels: Channel[];
-}
+}

src/types/channel.ts

@@ -0,0 +1,5 @@
+export default interface Channel {
+  id: string;
+  name: string;
+  kind: "text" | "voice";
+}

src/types/message.ts

@@ -0,0 +1,7 @@
+export default interface Message {
+  id: string;
+  content: string;
+  authorId: string;
+  channelId: string;
+  timestamp: Date;
+}