45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
/* EngagementSortChips — phase 07 (ENG-04).
|
|
* Purpose: 3-chip sort selector (Hours/Name/Utilization). Same chip styling as period chips.
|
|
* Maps to /api/engagement/users sort/order params per D-20.
|
|
* Props: value, onChange. Pure presentational. */
|
|
|
|
export type EngagementSortKey = 'hours' | 'name' | 'utilization';
|
|
|
|
export interface EngagementSortChipsProps {
|
|
value: EngagementSortKey;
|
|
onChange: (next: EngagementSortKey) => void;
|
|
}
|
|
|
|
const SORTS: ReadonlyArray<{ key: EngagementSortKey; label: string }> = [
|
|
{ key: 'hours', label: 'Hours' },
|
|
{ key: 'name', label: 'Name' },
|
|
{ key: 'utilization', label: 'Utilization' },
|
|
];
|
|
|
|
export function EngagementSortChips({ value, onChange }: EngagementSortChipsProps) {
|
|
return (
|
|
<div className="flex gap-2 items-center min-h-[44px]">
|
|
{SORTS.map(({ key, label }) => {
|
|
const isActive = key === value;
|
|
return (
|
|
<button
|
|
key={key}
|
|
type="button"
|
|
role="button"
|
|
aria-pressed={isActive}
|
|
onClick={() => { if (!isActive) onChange(key); }}
|
|
className={
|
|
isActive
|
|
? 'bg-primary text-primary-foreground rounded-full px-3 py-1.5 text-[10px] font-semibold'
|
|
: 'bg-muted text-foreground hover:bg-muted/80 rounded-full px-3 py-1.5 text-[10px] font-semibold'
|
|
}
|
|
>
|
|
{label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|