/* Dashboard app — assembles components, handles nav state */
const { useState: useStateApp } = React;

function DashboardApp() {
  const [active, setActive] = useStateApp('overview');
  return (
    <div className="app">
      <Sidebar active={active} onNav={setActive}/>
      <main className="main">
        <TopBar/>
        <div className="page-head">
          <div>
            <h1>Good morning, Maya.</h1>
            <div className="sub">Fleet is running at 98.2% availability. One turbine is offline.</div>
          </div>
          <div className="actions">
            <button className="btn btn-secondary">
              <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
              Export report
            </button>
            <button className="btn btn-primary">
              <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>
              New alert rule
            </button>
          </div>
        </div>
        <KpiRow/>
        <div className="grid">
          <OutputChart/>
          <TurbineList/>
        </div>
        <div className="grid">
          <SiteMap/>
          <AlertFeed/>
        </div>
      </main>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<DashboardApp/>);