You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

43 lines
1.4 KiB

"use client";
export type QuoteProviderId = "mothership" | "priority1";
interface QuoteProviderSwitchProps {
value: QuoteProviderId;
onChange: (value: QuoteProviderId) => void;
disabled?: boolean;
}
/** 卡派查价 — Mothership / Priority1 数据源切换 */
export function QuoteProviderSwitch({
value,
onChange,
disabled,
}: QuoteProviderSwitchProps) {
const tabs: Array<{ id: QuoteProviderId; label: string; desc: string }> = [
{ id: "mothership", label: "MotherShip", desc: "四档实时报价" },
{ id: "priority1", label: "Priority1", desc: "官网模拟填表" },
];
return (
<div className="mb-6 flex gap-1 rounded-md bg-bg p-1">
{tabs.map((tab) => (
<button
key={tab.id}
type="button"
disabled={disabled}
onClick={() => onChange(tab.id)}
className={`flex flex-1 flex-col items-center rounded-sm px-3 py-2 text-center transition-colors sm:flex-row sm:justify-center sm:gap-2 ${
value === tab.id
? "bg-surface text-primary shadow-card"
: "text-text-secondary hover:text-text-primary"
} ${disabled ? "cursor-not-allowed opacity-50" : ""}`}
>
<span className="text-sm font-semibold">{tab.label}</span>
<span className="text-xs text-text-secondary">{tab.desc}</span>
</button>
))}
</div>
);
}