function IconRail({ activeView, onView }) {
  const items = [
    { i: "layout-dashboard", v: "dashboard", t: "Dashboard" },
    { i: "kanban-square",    v: "pipeline",  t: "Pipeline"  },
    { i: "calendar",         v: "calendar",  t: "Calendar"  },
    { i: "globe",            v: "sites",     t: "Sites"     },
    { i: "credit-card",      v: "payments",  t: "Payments"  },
  ];
  return (
    <nav className="cm-rail">
      <div className="cm-rail__logo">
        <img src="assets/linear-logo.svg" alt="" />
      </div>
      <div className="cm-rail__sep" />
      {items.map(it => (
        <button key={it.v}
                className={"cm-rail__btn " + (activeView === it.v ? "is-active" : "")}
                onClick={() => onView(it.v)}>
          <i data-lucide={it.i} className="cm-icon-sm" style={{ flexShrink:0 }}></i>
          <span className="cm-rail__label">{it.t}</span>
        </button>
      ))}
      <button className={"cm-rail__btn " + (activeView === "settings" ? "is-active" : "")}
              style={{ marginTop:"auto" }}
              onClick={() => onView("settings")}>
        <i data-lucide="settings" className="cm-icon-sm" style={{ flexShrink:0 }}></i>
        <span className="cm-rail__label">Settings</span>
      </button>
      <div className="cm-rail__user" />
    </nav>
  );
}
window.IconRail = IconRail;