76 lines
1.8 KiB
TypeScript
76 lines
1.8 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { Sparkles, Zap } from 'lucide-react';
|
||
|
|
|
||
|
|
export type AnalyzerProvider = 'anthropic' | 'openrouter';
|
||
|
|
|
||
|
|
interface ProviderToggleProps {
|
||
|
|
value: AnalyzerProvider;
|
||
|
|
onChange: (next: AnalyzerProvider) => void;
|
||
|
|
disabled?: boolean;
|
||
|
|
size?: 'sm' | 'md';
|
||
|
|
}
|
||
|
|
|
||
|
|
const OPTIONS: Array<{
|
||
|
|
value: AnalyzerProvider;
|
||
|
|
label: string;
|
||
|
|
hint: string;
|
||
|
|
icon: typeof Sparkles;
|
||
|
|
}> = [
|
||
|
|
{
|
||
|
|
value: 'anthropic',
|
||
|
|
label: 'Claude',
|
||
|
|
hint: 'Haiku → Sonnet → Opus',
|
||
|
|
icon: Sparkles,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'openrouter',
|
||
|
|
label: 'DeepSeek',
|
||
|
|
hint: 'V4 Flash → V4 Pro → R1',
|
||
|
|
icon: Zap,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
export function ProviderToggle({
|
||
|
|
value,
|
||
|
|
onChange,
|
||
|
|
disabled = false,
|
||
|
|
size = 'md',
|
||
|
|
}: ProviderToggleProps) {
|
||
|
|
const padding = size === 'sm' ? 'px-2 py-1 text-xs' : 'px-3 py-1.5 text-sm';
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className="inline-flex rounded-md border bg-muted/40 p-0.5"
|
||
|
|
role="radiogroup"
|
||
|
|
aria-label="LLM provider"
|
||
|
|
>
|
||
|
|
{OPTIONS.map((opt) => {
|
||
|
|
const Icon = opt.icon;
|
||
|
|
const active = opt.value === value;
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
key={opt.value}
|
||
|
|
type="button"
|
||
|
|
role="radio"
|
||
|
|
aria-checked={active}
|
||
|
|
disabled={disabled}
|
||
|
|
onClick={() => onChange(opt.value)}
|
||
|
|
title={opt.hint}
|
||
|
|
className={[
|
||
|
|
padding,
|
||
|
|
'rounded-sm flex items-center gap-1.5 transition-colors',
|
||
|
|
active
|
||
|
|
? 'bg-background shadow-sm font-medium'
|
||
|
|
: 'text-muted-foreground hover:text-foreground',
|
||
|
|
disabled ? 'opacity-50 cursor-not-allowed' : '',
|
||
|
|
].join(' ')}
|
||
|
|
>
|
||
|
|
<Icon className={size === 'sm' ? 'w-3 h-3' : 'w-3.5 h-3.5'} />
|
||
|
|
{opt.label}
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|