devaine/CodeRED-Astra
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(chat): fixed chat layout + added shadows

Browse source
This commit is contained in:
JK-le-dev 2025-10-18 22:18:18 -05:00
commit 41d0451cce
9 changed files with 116 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

18
web-app/src/components/ui/chat/message-input.jsx
View file

@ -1,7 +1,8 @@
import React, { useState } from "react";
import DeleteButton from "src/components/ui/button/delete-button";
import DownButton from "src/components/ui/button/down-button";
import { MessageCirclePlus } from "lucide-react";
import { motion } from "motion/react";
import { BotMessageSquare } from "lucide-react";
export default function MessageInput({ onSend }) {
const [text, setText] = useState("");
@ -15,13 +16,16 @@ export default function MessageInput({ onSend }) {
return (
<div className="w-full flex justify-center">
<footer className="fixed bottom-2 max-w-2xl w-full px-4">
<footer className="fixed bottom-6 max-w-2xl w-full px-4">
<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">
<form
onSubmit={handleSubmit}
className="bg-gray-900 rounded-2xl border-2 border-gray-800 shadow-lg shadow-indigo-600"
>
<div className="flex p-2 shadow-xl">
<input
value={text}
@ -29,12 +33,14 @@ export default function MessageInput({ onSend }) {
placeholder="Type a message..."
className="flex-1 mx-2 rounded-md shadow-2sx border-none focus:border-none focus:outline-none"
/>
<button
<motion.button
type="submit"
className="flex gap-2 px-4 py-2 bg-gray-700 rounded-xl ml-4"
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
>
Send
</button>
<BotMessageSquare />
</motion.button>
</div>
</form>
</div>