hahachait
c9085bdefb
- Add TopNav component with AI Chat, Study Guides, Progress tabs - Refactor sidebar to include brand, new chat, subjects, chat history, settings - Add message action buttons (Helpful, Note, Deeper) on assistant responses - Enhance ChatInput with photo, mic attachment icons and AI disclaimer - Improve welcome state with 2x2 suggested prompt grid - Update global layout for proper sidebar offset (fix nav overlap) - Remove obsolete Header component - All styles: strict BEM naming, zero inline CSS, Paper Look theme
49 lines
1.7 KiB
React
49 lines
1.7 KiB
React
/* ========================================
|
|
TopNav Component — padhLe
|
|
======================================== */
|
|
|
|
import "./TopNav.css";
|
|
|
|
const TopNav = ({ activeTab, onTabChange }) => {
|
|
const tabs = [
|
|
{ id: "chat", label: "AI Chat", icon: "💬" },
|
|
{ id: "study", label: "Study Guides", icon: "📖" },
|
|
{ id: "progress", label: "Progress", icon: "📊" },
|
|
];
|
|
|
|
return (
|
|
<nav className="topnav">
|
|
<div className="topnav__tabs">
|
|
{tabs.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
className={`topnav__tab ${
|
|
activeTab === tab.id ? "topnav__tab--active" : ""
|
|
}`}
|
|
onClick={() => onTabChange(tab.id)}
|
|
>
|
|
<span className="topnav__icon">{tab.icon}</span>
|
|
<span className="topnav__label">{tab.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="topnav__actions">
|
|
<button className="topnav__action" aria-label="Search" title="Search">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<circle cx="11" cy="11" r="8" />
|
|
<path d="M21 21l-4.35-4.35" />
|
|
</svg>
|
|
</button>
|
|
<button className="topnav__action" aria-label="Notifications" title="Notifications">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
|
|
<path d="M13.73 21a2 2 0 0 1-3.46 0" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default TopNav;
|