45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
/* EngagementPeriodChips — phase 07 (ENG-02).
|
|
* Purpose: 3-chip period selector (7d/30d/90d) sticky below the page H1.
|
|
* Maps 1:1 to data-layer period_type values D7/D30/D90 (D-04).
|
|
* Props: period, onPeriodChange. Pure presentational — page owns refetch logic. */
|
|
|
|
export type EngagementPeriod = 'D7' | 'D30' | 'D90';
|
|
|
|
export interface EngagementPeriodChipsProps {
|
|
period: EngagementPeriod;
|
|
onPeriodChange: (next: EngagementPeriod) => void;
|
|
}
|
|
|
|
const CHIPS: ReadonlyArray<{ value: EngagementPeriod; label: string }> = [
|
|
{ value: 'D7', label: '7d' },
|
|
{ value: 'D30', label: '30d' },
|
|
{ value: 'D90', label: '90d' },
|
|
];
|
|
|
|
export function EngagementPeriodChips({ period, onPeriodChange }: EngagementPeriodChipsProps) {
|
|
return (
|
|
<div className="sticky top-0 z-10 bg-background pt-2 pb-3 -mx-4 px-4 flex gap-2 min-h-[44px]">
|
|
{CHIPS.map(chip => {
|
|
const isActive = chip.value === period;
|
|
return (
|
|
<button
|
|
key={chip.value}
|
|
type="button"
|
|
role="button"
|
|
aria-pressed={isActive}
|
|
onClick={() => { if (!isActive) onPeriodChange(chip.value); }}
|
|
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'
|
|
}
|
|
>
|
|
{chip.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|