44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
'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>
|
|
);
|
|
} |