fix e2e

apps/website/components/races/StewardingTabs.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { useState } from 'react';
+
+export type StewardingTab = 'pending' | 'resolved' | 'penalties';
+
+interface StewardingTabsProps {
+  activeTab: StewardingTab;
+  onTabChange: (tab: StewardingTab) => void;
+  pendingCount: number;
+}
+
+export function StewardingTabs({ activeTab, onTabChange, pendingCount }: StewardingTabsProps) {
+  const tabs: Array<{ id: StewardingTab; label: string }> = [
+    { id: 'pending', label: 'Pending' },
+    { id: 'resolved', label: 'Resolved' },
+    { id: 'penalties', label: 'Penalties' },
+  ];
+
+  return (
+    <div className="border-b border-charcoal-outline">
+      <div className="flex gap-4">
+        {tabs.map(tab => (
+          <button
+            key={tab.id}
+            onClick={() => onTabChange(tab.id)}
+            className={`pb-3 px-1 font-medium transition-colors ${
+              activeTab === tab.id
+                ? 'text-primary-blue border-b-2 border-primary-blue'
+                : 'text-gray-400 hover:text-white'
+            }`}
+          >
+            {tab.label}
+            {tab.id === 'pending' && pendingCount > 0 && (
+              <span className="ml-2 px-2 py-0.5 text-xs bg-warning-amber/20 text-warning-amber rounded-full">
+                {pendingCount}
+              </span>
+            )}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}