56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { Button } from '@/components/ui/button';
|
||
|
|
import { cn } from '@/lib/utils';
|
||
|
|
import type { DateRange } from '@/lib/services/analytics.service';
|
||
|
|
|
||
|
|
interface DateRangePickerProps {
|
||
|
|
value: DateRange;
|
||
|
|
onChange: (next: DateRange) => void;
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const OPTIONS: Array<{ value: DateRange; label: string }> = [
|
||
|
|
{ value: 'today', label: 'Today' },
|
||
|
|
{ value: '7d', label: '7d' },
|
||
|
|
{ value: '30d', label: '30d' },
|
||
|
|
{ value: '90d', label: '90d' },
|
||
|
|
];
|
||
|
|
|
||
|
|
export function DateRangePicker({ value, onChange, className }: DateRangePickerProps) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
role="tablist"
|
||
|
|
aria-label="Date range"
|
||
|
|
className={cn(
|
||
|
|
'inline-flex items-center rounded-lg border border-border bg-muted/40 p-0.5 shadow-xs',
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{OPTIONS.map((opt) => {
|
||
|
|
const active = opt.value === value;
|
||
|
|
return (
|
||
|
|
<Button
|
||
|
|
key={opt.value}
|
||
|
|
type="button"
|
||
|
|
role="tab"
|
||
|
|
aria-selected={active}
|
||
|
|
variant="ghost"
|
||
|
|
size="sm"
|
||
|
|
onClick={() => onChange(opt.value)}
|
||
|
|
className={cn(
|
||
|
|
'h-7 px-3 text-xs font-medium transition-all duration-base ease-spring',
|
||
|
|
active
|
||
|
|
? 'bg-background text-foreground shadow-sm'
|
||
|
|
: 'text-muted-foreground hover:text-foreground',
|
||
|
|
)}
|
||
|
|
data-testid={`range-${opt.value}`}
|
||
|
|
>
|
||
|
|
{opt.label}
|
||
|
|
</Button>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|