Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 155x 155x 155x 155x 155x 155x 155x 155x 155x 155x 155x 155x 155x 155x 155x 155x 155x 155x 155x 31x 31x 31x 31x 1x 1x | 'use client';
import React from 'react';
import { type TimeRange } from '@/lib/monitoring/percentiles';
export interface TimeRangeSelectorProps {
/** Currently selected time range */
value: TimeRange;
/** Callback when time range changes */
onChange: (range: TimeRange) => void;
/** Whether the selector is disabled */
disabled?: boolean;
/** Optional className for styling */
className?: string;
}
const TIME_RANGE_OPTIONS: { value: TimeRange; label: string }[] = [
{ value: '1h', label: '1 Hour' },
{ value: '6h', label: '6 Hours' },
{ value: '24h', label: '24 Hours' },
{ value: '7d', label: '7 Days' },
{ value: '30d', label: '30 Days' },
];
/**
* TimeRangeSelector component for selecting time windows for performance data
*/
export function TimeRangeSelector({
value,
onChange,
disabled = false,
className = '',
}: TimeRangeSelectorProps) {
return (
<div
className={`inline-flex rounded-lg bg-gray-100 dark:bg-gray-800 p-1 ${className}`}
role="group"
aria-label="Select time range"
data-testid="time-range-selector"
>
{TIME_RANGE_OPTIONS.map((option) => (
<button
key={option.value}
type="button"
onClick={() => onChange(option.value)}
disabled={disabled}
aria-pressed={value === option.value}
className={`
px-3 py-1.5 text-sm font-medium rounded-md transition-all duration-200
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1
disabled:opacity-50 disabled:cursor-not-allowed
${
value === option.value
? 'bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm'
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
}
`}
>
{option.label}
</button>
))}
</div>
);
}
export { type TimeRange };
|