雨霖铃
de7da9f1db
- 在 tailwind.config.js 中启用 darkMode: 'class' 并扩展语义化颜色变量 - 将全项目硬编码颜色（bg-white、text-gray-*、border-gray-* 等）替换为语义化类名 - 修复 popup/index.html 硬编码浅色背景色 - 同步更新相关单元测试中的类名断言
54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
export interface SwitchOption<T extends string | number = string> {
|
|
value: T;
|
|
label: React.ReactNode;
|
|
}
|
|
|
|
export interface SwitchButtonGroupProps<T extends string | number = string> {
|
|
value: T;
|
|
options: SwitchOption<T>[];
|
|
onChange: (value: T) => void;
|
|
sx?: React.CSSProperties;
|
|
size?: 'small' | 'medium' | 'large';
|
|
buttonSx?: React.CSSProperties;
|
|
}
|
|
|
|
export default function SwitchButtonGroup<T extends string | number = string>({
|
|
value,
|
|
options,
|
|
onChange,
|
|
sx,
|
|
size = 'medium',
|
|
buttonSx,
|
|
}: SwitchButtonGroupProps<T>) {
|
|
const sizeClasses = {
|
|
small: 'text-xs',
|
|
medium: 'text-sm',
|
|
large: 'text-base',
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="w-full mb-4 rounded-xl border border-border bg-muted p-1.5 flex gap-1"
|
|
style={sx}
|
|
>
|
|
{options.map((option) => (
|
|
<button
|
|
key={option.value}
|
|
type="button"
|
|
onClick={() => onChange(option.value)}
|
|
className={`flex-1 px-3 py-1.5 rounded-lg font-bold whitespace-nowrap transition-all ${
|
|
sizeClasses[size]
|
|
} ${
|
|
value === option.value
|
|
? 'bg-background text-primary shadow-sm'
|
|
: 'text-muted-foreground hover:text-foreground hover:bg-background/50'
|
|
}`}
|
|
style={buttonSx}
|
|
>
|
|
{option.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|