57 lines
3.4 KiB
TypeScript
57 lines
3.4 KiB
TypeScript
import { NavLink } from "react-router-dom";
|
|
|
|
const navLinks = [
|
|
{ to: "/dashboard", label: "Dashboard", icon: "grid" },
|
|
{ to: "/", label: "Inbox", icon: "inbox" },
|
|
{ to: "/replay", label: "Conversation Replay", icon: "play" },
|
|
{ to: "/review", label: "Agents & Tools", icon: "cpu" },
|
|
];
|
|
|
|
function getIcon(name: string) {
|
|
switch (name) {
|
|
case "grid": return <svg width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>;
|
|
case "inbox": return <svg width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg>;
|
|
case "play": return <svg width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>;
|
|
case "cpu": return <svg width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="14" x2="23" y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="14" x2="4" y2="14"></line></svg>;
|
|
default: return null;
|
|
}
|
|
}
|
|
|
|
export function NavBar() {
|
|
return (
|
|
<nav className="app-sidebar">
|
|
<div className="brand-header">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="brand-logo-svg">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
|
|
<line x1="9" y1="9" x2="9.01" y2="9"></line>
|
|
<line x1="15" y1="9" x2="15.01" y2="9"></line>
|
|
</svg>
|
|
<span style={{ fontSize: "1.25rem", letterSpacing: "-0.03em" }}>Nexus AI</span>
|
|
</div>
|
|
<div className="nav-links" style={{ marginTop: "1rem" }}>
|
|
{navLinks.map(({ to, label, icon }) => (
|
|
<NavLink
|
|
key={to}
|
|
to={to}
|
|
end={to === "/"}
|
|
className={({ isActive }) => `nav-link ${isActive ? "active" : ""}`}
|
|
style={{ display: "flex", gap: "12px", padding: "0.875rem 1rem", fontSize: "0.9375rem" }}
|
|
>
|
|
<span style={{ opacity: 0.7 }}>{getIcon(icon)}</span>
|
|
{label}
|
|
</NavLink>
|
|
))}
|
|
</div>
|
|
<div style={{ flex: 1 }} />
|
|
<div style={{ display: "flex", alignItems: "center", gap: "12px", borderTop: "1px solid var(--border-light)", paddingTop: "1rem" }}>
|
|
<div style={{ width: "36px", height: "36px", borderRadius: "50%", background: "var(--brand-primary)", color: "white", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold" }}>A</div>
|
|
<div>
|
|
<div style={{ fontWeight: 600, fontSize: "0.875rem" }}>Alex Thompson</div>
|
|
<div style={{ fontSize: "0.75rem", color: "var(--text-secondary)" }}>Nexus Corp</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|