wehub-resource-sync
52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
|
|
export type TimeRange = '7d' | '30d' | '90d' | 'all';
|
|
|
|
interface TimeRangePickerProps {
|
|
value: TimeRange;
|
|
onChange: (range: TimeRange) => void;
|
|
}
|
|
|
|
const OPTIONS: { value: TimeRange; label: string }[] = [
|
|
{ value: '7d', label: '7D' },
|
|
{ value: '30d', label: '30D' },
|
|
{ value: '90d', label: '90D' },
|
|
{ value: 'all', label: 'All' },
|
|
];
|
|
|
|
export function TimeRangePicker({ value, onChange }: TimeRangePickerProps) {
|
|
return (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
gap: 2,
|
|
background: 'var(--bg-secondary)',
|
|
borderRadius: 'var(--radius-sm)',
|
|
padding: 2,
|
|
border: '1px solid var(--border)',
|
|
}}
|
|
>
|
|
{OPTIONS.map(opt => (
|
|
<button
|
|
key={opt.value}
|
|
onClick={() => onChange(opt.value)}
|
|
style={{
|
|
padding: '3px 10px',
|
|
border: 'none',
|
|
borderRadius: 'var(--radius-sm)',
|
|
cursor: 'pointer',
|
|
fontSize: 12,
|
|
fontWeight: value === opt.value ? 600 : 400,
|
|
background: value === opt.value ? 'var(--bg-card)' : 'transparent',
|
|
color: value === opt.value ? 'var(--ink)' : 'var(--ink-muted)',
|
|
boxShadow: value === opt.value ? 'var(--shadow-sm)' : 'none',
|
|
transition: 'all 0.12s ease',
|
|
}}
|
|
>
|
|
{opt.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|