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

style send button

Browse source
This commit is contained in:
yenminh269 2025-10-18 18:35:52 -05:00
commit 3bcd4087de
3 changed files with 13 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

10
web-app/src/components/ui/Button/ActionButton.jsx
View file

@ -3,7 +3,7 @@ import './ActionButton.css';
export default function ActionButton({ export default function ActionButton({
onClick, onClick,
children, children,
type = 'add', // 'add' or 'delete' type = 'add', // 'add' or 'delete' or 'send'
...props ...props
}) { }) {
// Define color and icon based on type // Define color and icon based on type
@ -39,6 +39,12 @@ export default function ActionButton({
</svg> </svg>
), ),
}, },
submit: {
color: '#3949AB',
svg: (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send-icon lucide-send"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg>
),
},
}; };
const { color, svg } = config[type] || config.add; const { color, svg } = config[type] || config.add;
@ -50,7 +56,7 @@ export default function ActionButton({
style={{ '--btn-color': color }} style={{ '--btn-color': color }}
{...props} {...props}
> >
{ type === 'add' ? 'New Chat' : 'Delete Chat'} {children}
{svg} {svg}
</button> </button>
); );

4
web-app/src/components/ui/chat/chat-header.jsx
View file

@ -31,8 +31,8 @@ export default function ChatHeader({ title = "AI Assistant" }) {
Ask anything — AI is listening Ask anything — AI is listening
</p> </p>
</div> </div>
<ActionButton type="add" onClick={handleNewChat}></ActionButton> <ActionButton children='New Chat' type="add" onClick={handleNewChat}></ActionButton>
<ActionButton type="delete" onClick={handleDeleteChat}></ActionButton> <ActionButton children='Delete Chat'type="delete" onClick={handleDeleteChat}></ActionButton>
</div> </div>
</header> </header>

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

@ -1,5 +1,5 @@
import React, { useState } from "react"; import React, { useState } from "react";
import ActionButton from "../Button/ActionButton";
export default function MessageInput({ onSend }) { export default function MessageInput({ onSend }) {
const [text, setText] = useState(""); const [text, setText] = useState("");
@ -19,12 +19,8 @@ export default function MessageInput({ onSend }) {
placeholder="Type a message..." placeholder="Type a message..."
className="flex-1 rounded-md bg-slate-800 border border-slate-700 px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500" className="flex-1 rounded-md bg-slate-800 border border-slate-700 px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
/> />
<button <ActionButton children="Send" type="submit"></ActionButton>
type="submit"
className="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-md"
>
Send
</button>
</div> </div>
</form> </form>
); );