// Dashboard layout — shared between Trainer, Client, Nutritionist variants.
// See: Shape Community live spec. Direction B visual system (PAPER/INK/TEAL).
// Reusable sidebar. Renders a dashboard home href + nav items with active states.
// navItems items: { label, count, active, href }
// Note: the marketing top nav (Header from pageShell.jsx) is rendered above
// this sidebar by DashPage/DashShell. The fixed header is ~56px tall so the
// sticky sidebar offsets by that amount to sit just below it.
function DashSidebar({ navItems, payoutCard, homeHref = "index.html" }) {
return (
);
}
// Inner-page shell: sidebar + main w/ title bar + freeform children.
// Header (the marketing top nav from pageShell.jsx) renders above the
// dashboard grid so dashboards share the index.html nav formatting.
function DashPage({ navItems, payoutCard, eyebrow, title, subtitle, actions, children }) {
return (
{eyebrow &&
{eyebrow}
}
{title}
{subtitle &&
{subtitle}
}
{actions &&
{actions}
}
{children}
);
}
// Small helpers available to every inner page
function Card({ children, style }) {
return
{children}
;
}
function SectionTitle({ children, right }) {
return (
{children}
{right &&
{right}
}
);
}
function Pill({ children, tone = "mute" }) {
const bg = tone === "teal" ? TEAL : tone === "done" ? "rgba(242,237,228,0.08)" : "rgba(242,237,228,0.08)";
const col = tone === "teal" ? PAPER : "rgba(242,237,228,0.7)";
const bd = tone === "teal" ? "none" : "1px solid rgba(242,237,228,0.12)";
return {children};
}
// Row renderer for DashShell.todayItems. Supports t.playlist = { name, provider, bpm, accent, cover, note, author, tracks }
function DashTodayItemRow({ t }) {
const [open, setOpen] = React.useState(false);
const p = t.playlist;
const spotMark = (
);
const appleMark = (
);
return (