feat: Улучшение компонентов Dashboard, EmptyState, ErrorAlert и Pagination. Добавлены новые функции, такие как индикаторы тренда, возможность перехода на страницу и улучшенные действия с ошибками. Обновлены стили для повышения удобства использования и доступности.

2025-10-03 19:11:10 +07:00
parent 72fbb7bde5
commit 18f3a5312a
16 changed files with 2697 additions and 96 deletions
@@ -0,0 +1,110 @@
+/**
+ * KeyboardShortcutHint - компонент для отображения подсказок по горячим клавишам
+ * Используется внутри кнопок и других элементов
+ */
+function KeyboardShortcutHint({ shortcut, className = '' }) {
+  if (!shortcut) return null
+
+  // Разбиваем комбинацию клавиш на части
+  const keys = shortcut.split('+').map(k => k.trim())
+
+  return (
+    <span className={`keyboard-shortcut-hint ${className}`}>
+      {keys.map((key, index) => (
+        <kbd key={index} className="kbd">
+          {key}
+        </kbd>
+      ))}
+      
+      <style jsx>{`
+        .keyboard-shortcut-hint {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.25rem;
+          margin-left: 0.5rem;
+          opacity: 0.7;
+        }
+        
+        .kbd {
+          background: rgba(0, 0, 0, 0.05);
+          border: 1px solid rgba(0, 0, 0, 0.1);
+          border-radius: 0.25rem;
+          padding: 0.125rem 0.375rem;
+          font-size: 0.75rem;
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+          font-weight: 500;
+          line-height: 1;
+          box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+        }
+        
+        @media (prefers-color-scheme: dark) {
+          .kbd {
+            background: rgba(255, 255, 255, 0.1);
+            border-color: rgba(255, 255, 255, 0.2);
+            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
+          }
+        }
+        
+        /* Скрываем на мобильных */
+        @media (max-width: 768px) {
+          .keyboard-shortcut-hint {
+            display: none;
+          }
+        }
+      `}</style>
+    </span>
+  )
+}
+
+/**
+ * ShortcutsList - компонент для отображения списка горячих клавиш
+ * Используется в модальных окнах помощи
+ */
+function ShortcutsList({ shortcuts }) {
+  return (
+    <div className="shortcuts-list">
+      {shortcuts.map((shortcut, index) => (
+        <div key={index} className="shortcut-item">
+          <span className="shortcut-description">{shortcut.description}</span>
+          <KeyboardShortcutHint shortcut={shortcut.keys} />
+        </div>
+      ))}
+      
+      <style jsx>{`
+        .shortcuts-list {
+          display: flex;
+          flex-direction: column;
+          gap: 0.75rem;
+        }
+        
+        .shortcut-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 0.5rem;
+          border-radius: 0.25rem;
+          transition: background-color 0.15s ease;
+        }
+        
+        .shortcut-item:hover {
+          background-color: rgba(0, 0, 0, 0.02);
+        }
+        
+        .shortcut-description {
+          flex: 1;
+          color: var(--tblr-body-color);
+        }
+        
+        @media (prefers-color-scheme: dark) {
+          .shortcut-item:hover {
+            background-color: rgba(255, 255, 255, 0.05);
+          }
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export { KeyboardShortcutHint, ShortcutsList }
+export default KeyboardShortcutHint
+