Files
padhle/frontend/src/App.jsx
T
hahachait ab88ae30f1 refactor: redesign UI to match EduAI Refined Workspace
- Replace Bauhaus aesthetic with Material Design 3-inspired layout
- Add working grade/subject/chapter dropdown selectors with placeholder options
- Fix ChatInput layout: remove position:absolute, use flex column flow
- Update sidebar with Material Icons, upgrade card, and clean hover states
- Add TopNav dropdowns with click-outside-to-close behavior
- Modernize message bubbles, action buttons, and welcome state
- Replace SVG icons with Material Symbols throughout
- Apply consistent BEM naming, CSS custom properties, no inline styles
2026-08-15 04:40:26 -04:00

78 lines
2.2 KiB
React
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* ========================================
App Component — padhle (Refined Workspace)
======================================== */
import { useState } from "react";
import Sidebar from "./components/sidebar/Sidebar";
import TopNav from "./components/top-nav/TopNav";
import ChatHistory from "./components/chat-history/ChatHistory";
import ChatInput from "./components/chat-input/ChatInput";
function App() {
const [messages, setMessages] = useState([]);
const [activeSubject, setActiveSubject] = useState("Choose Subject");
const [activeChat, setActiveChat] = useState(null);
const [activeGrade, setActiveGrade] = useState("Choose standard");
const [activeChapter, setActiveChapter] = useState("Choose Chapter");
const handleSend = (text) => {
if (!text.trim()) return;
setMessages((prev) => [...prev, { id: Date.now(), role: "user", text }]);
setTimeout(() => {
setMessages((prev) => [
...prev,
{
id: Date.now() + 1,
role: "assistant",
text: "This is a simulated response. Connect the backend to get real AI answers!",
},
]);
}, 1000);
};
const handlePromptClick = (promptText) => {
handleSend(promptText);
};
return (
<div className="page">
<Sidebar
activeSubject={activeSubject}
onSubjectChange={setActiveSubject}
activeChat={activeChat}
onChatSelect={setActiveChat}
/>
<div className="page__main">
<TopNav
activeGrade={activeGrade}
onGradeChange={setActiveGrade}
activeSubject={activeSubject}
onSubjectChange={setActiveSubject}
activeChapter={activeChapter}
onChapterChange={setActiveChapter}
/>
<div className="main-content">
<ChatHistory
messages={messages}
activeSubject={activeSubject}
activeGrade={activeGrade}
activeChapter={activeChapter}
onPromptClick={handlePromptClick}
/>
</div>
<ChatInput
onSend={handleSend}
placeholder={`Ask anything about ${activeGrade} ${activeSubject} ${activeChapter}...`}
/>
</div>
</div>
);
}
export default App;