MessageComposer

1"use client";
2
3import { Button } from "@/components/ui/button";
4import { Textarea } from "@/components/ui/textarea";
5import { Paperclip, Smile, Image, SendHorizontal } from "lucide-react";
6import { useState } from "react";
7
8export default function MessageComposer() {
9  const [message, setMessage] = useState("");
10  const maxLength = 500;
11
12  const handleSend = () => {
13    if (message.trim()) {
14      console.log("Sending:", message);
15      setMessage("");
16    }
17  };
18
19  return (
20    <div className="w-full max-w-lg border rounded-lg p-3 space-y-3">
21      <Textarea
22        placeholder="Type a message..."
23        value={message}
24        onChange={(e) => setMessage(e.target.value)}
25        className="min-h-[100px] resize-none border-0 focus-visible:ring-0 p-0"
26        maxLength={maxLength}
27      />
28      <div className="flex items-center justify-between">
29        <div className="flex items-center gap-1">
30          <Button variant="ghost" size="sm">
31            <Paperclip className="w-4 h-4" />
32          </Button>
33          <Button variant="ghost" size="sm">
34            <Image className="w-4 h-4" />
35          </Button>
36          <Button variant="ghost" size="sm">
37            <Smile className="w-4 h-4" />
38          </Button>
39        </div>
40        <div className="flex items-center gap-3">
41          <span className={`text-xs ${message.length >= maxLength ? "text-destructive" : "text-muted-foreground"}`}>
42            {message.length}/{maxLength}
43          </span>
44          <Button
45            size="sm"
46            onClick={handleSend}
47            disabled={!message.trim()}
48            className="gap-2"
49          >
50            <SendHorizontal className="w-4 h-4" />
51            Send
52          </Button>
53        </div>
54      </div>
55    </div>
56  );
57}