Correct Hub and Engine component geometry

2026-07-10 03:14:43 +03:00
parent 73629d68c3
commit 4a9ad01ea6
28 changed files with 922 additions and 167 deletions
@@ -0,0 +1,102 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { cn } from "./cn";
+
+export interface AdminNavigationContext {
+  id: string;
+  label: string;
+  description?: string;
+  groupLabel?: string;
+  icon?: ReactNode;
+  active?: boolean;
+  onSelect?: () => void;
+  onToggle?: () => void;
+}
+
+export interface AdminNavigationItem {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+}
+
+export interface AdminNavigationPanelProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  eyebrow?: string;
+  title: ReactNode;
+  contexts?: AdminNavigationContext[];
+  items: AdminNavigationItem[];
+  activeId?: string;
+  footer?: ReactNode;
+  closeLabel?: string;
+  onClose: () => void;
+  onItemChange: (id: string) => void;
+}
+
+export function AdminNavigationPanel({
+  eyebrow = "NODE.DC",
+  title,
+  contexts = [],
+  items,
+  activeId,
+  footer,
+  closeLabel = "Закрыть администрирование",
+  onClose,
+  onItemChange,
+  className,
+  ...props
+}: AdminNavigationPanelProps) {
+  return (
+    <aside className={cn("nodedc-admin-panel", className)} {...props}>
+      <header className="nodedc-admin-panel__head">
+        <div>
+          <p>{eyebrow}</p>
+          <h2>{title}</h2>
+        </div>
+        <button type="button" className="nodedc-admin-panel__close" aria-label={closeLabel} onClick={onClose}>
+          <span className="nodedc-close-mark" aria-hidden="true" />
+        </button>
+      </header>
+
+      <div className="nodedc-admin-panel__contexts">
+        {contexts.map((context) => (
+          <div className="nodedc-admin-panel__context-group" key={context.id}>
+            {context.groupLabel ? <span className="nodedc-admin-panel__group-label">{context.groupLabel}</span> : null}
+            <div
+              className={cn("nodedc-admin-context", context.onToggle && "nodedc-admin-context--split")}
+              data-active={context.active ? "true" : undefined}
+            >
+              <button type="button" className="nodedc-admin-context__main" onClick={context.onSelect}>
+                <span className="nodedc-admin-context__icon" aria-hidden="true">{context.icon}</span>
+                <span className="nodedc-admin-context__body">
+                  <strong>{context.label}</strong>
+                  {context.description ? <small>{context.description}</small> : null}
+                </span>
+              </button>
+              {context.onToggle ? (
+                <button type="button" className="nodedc-admin-context__toggle" aria-label={`Выбрать: ${context.label}`} onClick={context.onToggle}>
+                  <span className="nodedc-select-trigger__chevron" aria-hidden="true" />
+                </button>
+              ) : null}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <nav className="nodedc-admin-panel__nav" aria-label="Разделы администрирования">
+        {items.map((item) => (
+          <button
+            key={item.id}
+            type="button"
+            className="nodedc-admin-panel__nav-item"
+            data-active={activeId === item.id ? "true" : undefined}
+            onClick={() => onItemChange(item.id)}
+          >
+            <span className="nodedc-admin-panel__nav-icon" aria-hidden="true">{item.icon}</span>
+            <span>{item.label}</span>
+          </button>
+        ))}
+      </nav>
+
+      {footer ? <footer className="nodedc-admin-panel__footer">{footer}</footer> : null}
+    </aside>
+  );
+}
+