77 lines
2.5 KiB
TypeScript
77 lines
2.5 KiB
TypeScript
import { Download } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
import type { ChartType, TimeRange } from '@/lib/types';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
type ChartToolbarProps = {
|
|
chartType: ChartType;
|
|
timeRange: TimeRange;
|
|
onChartTypeChange: (type: ChartType) => void;
|
|
onTimeRangeChange: (range: TimeRange) => void;
|
|
onExport: () => void;
|
|
};
|
|
|
|
const TIME_RANGES: TimeRange[] = ['1W', '1M', '3M', '1Y', '3Y', '5Y', '10Y', '20Y'];
|
|
const CHART_TYPES: { value: ChartType; label: string }[] = [
|
|
{ value: 'line', label: 'Line' },
|
|
{ value: 'combination', label: 'Compare' }
|
|
];
|
|
|
|
export function ChartToolbar({
|
|
chartType,
|
|
timeRange,
|
|
onChartTypeChange,
|
|
onTimeRangeChange,
|
|
onExport
|
|
}: ChartToolbarProps) {
|
|
return (
|
|
<div className="mb-4 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{TIME_RANGES.map((range) => (
|
|
<button
|
|
key={range}
|
|
type="button"
|
|
onClick={() => onTimeRangeChange(range)}
|
|
className={cn(
|
|
'min-h-9 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors',
|
|
timeRange === range
|
|
? 'bg-[color:var(--accent)] text-[#16181c]'
|
|
: 'bg-[color:var(--panel-soft)] text-[color:var(--terminal-muted)] hover:bg-[color:var(--panel-bright)] hover:text-[color:var(--terminal-bright)]'
|
|
)}
|
|
>
|
|
{range}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex gap-1">
|
|
{CHART_TYPES.map((type) => (
|
|
<button
|
|
key={type.value}
|
|
type="button"
|
|
onClick={() => onChartTypeChange(type.value)}
|
|
className={cn(
|
|
'rounded-lg px-3 py-1.5 text-xs font-medium transition-colors',
|
|
chartType === type.value
|
|
? 'bg-[color:var(--accent)] text-[#16181c]'
|
|
: 'bg-[color:var(--panel-soft)] text-[color:var(--terminal-muted)] hover:bg-[color:var(--panel-bright)] hover:text-[color:var(--terminal-bright)]'
|
|
)}
|
|
>
|
|
{type.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
onClick={onExport}
|
|
className="min-h-9 gap-1.5 px-2.5 py-1.5 text-xs"
|
|
>
|
|
<Download className="h-3.5 w-3.5" />
|
|
Export
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|