File size: 1,514 Bytes
bc4a7e8 | 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 | "use client";
import { cn } from "@/shared/utils/cn";
import type { UtilizationTimeRange } from "@/shared/types/utilization";
interface TimeRangeSelectorProps {
value: UtilizationTimeRange;
onChange: (range: UtilizationTimeRange) => void;
}
const OPTIONS: Array<{ value: UtilizationTimeRange; label: string }> = [
{ value: "1h", label: "1h" },
{ value: "24h", label: "24h" },
{ value: "7d", label: "7d" },
{ value: "30d", label: "30d" },
];
export default function TimeRangeSelector({ value, onChange }: TimeRangeSelectorProps) {
return (
<div
role="tablist"
aria-label="Select time range"
className="inline-flex items-center gap-1 rounded-lg bg-black/5 p-1 dark:bg-white/5"
>
{OPTIONS.map((option) => {
const isActive = value === option.value;
return (
<button
key={option.value}
type="button"
role="tab"
aria-selected={isActive}
tabIndex={isActive ? 0 : -1}
onClick={() => onChange(option.value)}
className={cn(
"focus-ring h-9 rounded-md px-4 text-sm font-medium transition-all",
isActive
? "bg-primary text-white shadow-sm hover:bg-primary-hover"
: "text-text-muted hover:bg-black/5 hover:text-text-main dark:hover:bg-white/5"
)}
>
{option.label}
</button>
);
})}
</div>
);
}
|