46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import { useApp } from '@/lib/context';
|
|
import type { TimeRange, TimeMode } from '@/lib/types';
|
|
|
|
const RANGES: TimeRange[] = ['30m', '1h', '6h', '24h', '7d', '30d'];
|
|
|
|
export default function TimeRangeSelector() {
|
|
const { timeRange, setTimeRange, timeMode, setTimeMode } = useApp();
|
|
|
|
return (
|
|
<div className="flex items-center gap-3 flex-wrap">
|
|
<div className="flex rounded overflow-hidden border border-gray-700">
|
|
{RANGES.map(r => (
|
|
<button
|
|
key={r}
|
|
onClick={() => setTimeRange(r)}
|
|
className={`px-3 py-1 text-sm font-mono transition-colors ${
|
|
timeRange === r
|
|
? 'bg-indigo-600 text-white'
|
|
: 'bg-gray-800 text-gray-300 hover:bg-gray-700'
|
|
}`}
|
|
>
|
|
{r}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex rounded overflow-hidden border border-gray-700">
|
|
{(['real', 'tick'] as TimeMode[]).map(m => (
|
|
<button
|
|
key={m}
|
|
onClick={() => setTimeMode(m)}
|
|
className={`px-3 py-1 text-sm transition-colors ${
|
|
timeMode === m
|
|
? 'bg-indigo-600 text-white'
|
|
: 'bg-gray-800 text-gray-300 hover:bg-gray-700'
|
|
}`}
|
|
>
|
|
{m === 'real' ? 'Real Time' : 'Game Tick'}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |