Переработка списков (#5)

Co-authored-by: gorbenko.pavel <gorbenko.pavel@tansu.kz>
Reviewed-on: http://git.tnsu.kz/timur.gorodetskiy/request-portal/pulls/5

src/webparts/requestPortal/features/myRequests/OwnTabs.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import styles from './OwnTabs.module.scss';
+import { OwnTab } from '../../shared/routing';
+
+interface IOwnTabItem {
+  id: OwnTab;
+  title: string;
+}
+
+// Суффикс «мной» намеренно опущен: раздел уже называется «Мои заявки», и внутри
+// него он повторялся бы в каждой вкладке. Первая вкладка — про авторство,
+// остальные три — про решения пользователя в ЧУЖИХ маршрутах.
+const ITEMS: IOwnTabItem[] = [
+  { id: 'created', title: 'Инициированные' },
+  { id: 'approved', title: 'Согласованные' },
+  { id: 'rejected', title: 'Отклонённые' },
+  { id: 'executed', title: 'Выполненные' },
+];
+
+interface IOwnTabsProps {
+  activeId: OwnTab;
+  onChange: (id: OwnTab) => void;
+}
+
+/** Горизонтальный переключатель подвкладок раздела «Мои заявки». */
+export const OwnTabs: React.FC<IOwnTabsProps> = ({ activeId, onChange }) => (
+  <nav className={styles.tabs} aria-label="Разделы моих заявок">
+    {ITEMS.map((item) => {
+      const isActive = item.id === activeId;
+      const tabClasses = [styles.tab, isActive ? styles.active : ''].filter(Boolean).join(' ');
+
+      return (
+        <button
+          key={item.id}
+          type="button"
+          className={tabClasses}
+          aria-current={isActive ? 'page' : undefined}
+          onClick={() => onChange(item.id)}
+        >
+          {item.title}
+        </button>
+      );
+    })}
+  </nav>
+);