39 lines
1.1 KiB
JavaScript
39 lines
1.1 KiB
JavaScript
import React, { useState } from "react";
|
|
import DeleteButton from "src/components/ui/button/delete-button";
|
|
import DownButton from "../button/down-button";
|
|
|
|
export default function MessageInput({ onSend }) {
|
|
const [text, setText] = useState("");
|
|
|
|
function handleSubmit(e) {
|
|
e.preventDefault();
|
|
if (!text.trim()) return;
|
|
onSend(text.trim());
|
|
setText("");
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
<div className="flex justify-between">
|
|
<DeleteButton></DeleteButton>
|
|
<DownButton></DownButton>
|
|
</div>
|
|
<form onSubmit={handleSubmit} className="bg-gray-900 rounded-2xl">
|
|
<div className="flex p-2 shadow-xl">
|
|
<input
|
|
value={text}
|
|
onChange={(e) => setText(e.target.value)}
|
|
placeholder="Type a message..."
|
|
className="flex-1 mx-2 rounded-md shadow-2sx border-none focus:border-none focus:outline-none"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
className="px-4 py-2 bg-gray-700 rounded-xl ml-4"
|
|
>
|
|
Send
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|