- 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
78 lines
2.2 KiB
React
78 lines
2.2 KiB
React
/* ========================================
|
||
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;
|