Add LynkedUp Pro dashboard (dark + light) from Figma
- Full dashboard at /dashboard matching the Figma Linkedup-Web frame - Dark/light theme toggle (persisted to localStorage) - Live animated charts: stat sparkbars, P&L grouped bars, donut, gauge, pipeline bars, progress, revenue-potential - Sidebar, topbar, stat cards, weather, top sales reps - 29 icons exported from Figma (currentColor) + lucide fallbacks - Fix: bar charts had zero height (percentage in indefinite flex parent) - Fix: removed content max-width that left a right-side gap Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,33 @@
|
||||
"use client";
|
||||
|
||||
import { Sun, ChevronDown } from "lucide-react";
|
||||
import { FigIcon } from "./figicon";
|
||||
|
||||
export function Topbar({ theme, onToggle }: { theme: "dark" | "light"; onToggle: () => void }) {
|
||||
return (
|
||||
<header className="dash-topbar">
|
||||
<div className="dash-title">
|
||||
<h1>Dashboard Overview</h1>
|
||||
<p>Welcome back, here's what's happening with your territory</p>
|
||||
</div>
|
||||
<div className="top-actions">
|
||||
<button className="ic-btn" aria-label="Search"><FigIcon name="i_search" size={18} /></button>
|
||||
<button className="ic-btn" aria-label="Toggle theme" onClick={onToggle}>
|
||||
{theme === "dark" ? <FigIcon name="i_theme" size={18} /> : <Sun size={18} />}
|
||||
</button>
|
||||
<button className="ic-btn" aria-label="Notifications" style={{ position: "relative" }}>
|
||||
<FigIcon name="i_bell" size={18} />
|
||||
<span style={{ position: "absolute", top: 9, right: 10, width: 7, height: 7, borderRadius: 99, background: "var(--orange)", border: "2px solid var(--panel)" }} />
|
||||
</button>
|
||||
<button className="top-user">
|
||||
<span className="av" style={{ background: "linear-gradient(135deg,#fda913,#fd6d13)", display: "grid", placeItems: "center", color: "#fff", fontWeight: 700, fontSize: 12 }}>JJ</span>
|
||||
<div style={{ textAlign: "left" }}>
|
||||
<div className="nm">Justin Johnson</div>
|
||||
<div className="rl">Owner</div>
|
||||
</div>
|
||||
<ChevronDown size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user