refactor(CommunitiesManager): update tab navigation style to improve layout and user interaction

2026-02-16 22:12:23 +07:00
parent 87f8283191
commit f380be5d21
1 changed files with 41 additions and 30 deletions
@@ -386,36 +386,47 @@ function CommunitiesManager() {
        </div>
      )}

-      {/* Вкладки: Список / Статистика в стиле Tabler */}
-      <div className="card card-flat mb-3">
-        <div className="card-header border-0 pb-0">
-          <ul className="nav nav-tabs card-header-tabs" role="tablist">
-            <li className="nav-item" role="presentation">
-              <button
-                className={`nav-link ${activeTab === 'list' ? 'active' : ''}`}
-                onClick={() => setActiveTab('list')}
-                type="button"
-                role="tab"
-                aria-selected={activeTab === 'list'}
-              >
-                <IconList className="me-2" size={18} />
-                Список communities
-                <span className="badge bg-blue-lt text-blue ms-2">{filtered.length}</span>
-              </button>
-            </li>
-            <li className="nav-item" role="presentation">
-              <button
-                className={`nav-link ${activeTab === 'stats' ? 'active' : ''}`}
-                onClick={() => setActiveTab('stats')}
-                type="button"
-                role="tab"
-                aria-selected={activeTab === 'stats'}
-              >
-                <IconChartBar className="me-2" size={18} />
-                Статистика использования
-              </button>
-            </li>
-          </ul>
+      {/* Табы в стиле NetworkConfigManager (как на скрине) */}
+      <div className="mb-3">
+        <div className="btn-group" role="tablist" aria-label="Переключение режимов страницы">
+          <button
+            type="button"
+            className={`btn ${activeTab === 'list' ? 'btn-primary' : 'btn-outline-primary'}`}
+            onClick={() => setActiveTab('list')}
+            role="tab"
+            aria-pressed={activeTab === 'list'}
+          >
+            <IconList size={16} className="me-1 d-none d-sm-inline" />
+            Список
+            <span
+              className={`badge ms-1 ${
+                activeTab === 'list'
+                  ? 'bg-white text-primary'
+                  : 'bg-primary-lt text-primary'
+              }`}
+            >
+              {filtered.length}
+            </span>
+          </button>
+          <button
+            type="button"
+            className={`btn ${activeTab === 'stats' ? 'btn-primary' : 'btn-outline-primary'}`}
+            onClick={() => setActiveTab('stats')}
+            role="tab"
+            aria-pressed={activeTab === 'stats'}
+          >
+            <IconChartBar size={16} className="me-1 d-none d-sm-inline" />
+            Статистика
+            <span
+              className={`badge ms-1 ${
+                activeTab === 'stats'
+                  ? 'bg-white text-primary'
+                  : 'bg-primary-lt text-primary'
+              }`}
+            >
+              {items.length}
+            </span>
+          </button>
        </div>
      </div>