34 lines
1.0 KiB
JavaScript
34 lines
1.0 KiB
JavaScript
export function OpsShell({ activeView, children, onViewChange, views }) {
|
|
return (
|
|
<div className="ops-shell">
|
|
<aside className="ops-sidebar" aria-label="运营中心导航">
|
|
<div className="ops-brand">
|
|
<span>OP</span>
|
|
<div>
|
|
<strong>运营中心</strong>
|
|
<small>Ops Center</small>
|
|
</div>
|
|
</div>
|
|
<nav aria-label="运营中心导航" className="ops-nav">
|
|
{views.map((view) => {
|
|
const Icon = view.icon;
|
|
return (
|
|
<button
|
|
aria-current={activeView === view.key ? "page" : undefined}
|
|
className={activeView === view.key ? "is-active" : ""}
|
|
key={view.key}
|
|
onClick={() => onViewChange(view.key)}
|
|
type="button"
|
|
>
|
|
<Icon fontSize="small" />
|
|
{view.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
</aside>
|
|
<main className="ops-main">{children}</main>
|
|
</div>
|
|
);
|
|
}
|