雨霖铃
3ab7194501
- 在 CopyButton、SwitchButtonGroup 和 TextInputArea 组件中，将原有的 button 元素替换为统一的 Button 组件，提升代码一致性和可维护性。 - 更新相关样式和属性以适应新组件，确保功能正常。
67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export interface SwitchOption<T extends string | number = string> {
|
|
value: T;
|
|
label: React.ReactNode;
|
|
}
|
|
|
|
export interface SwitchButtonGroupProps<T extends string | number = string> extends Omit<
|
|
React.HTMLAttributes<HTMLDivElement>,
|
|
'onChange'
|
|
> {
|
|
value: T;
|
|
options: SwitchOption<T>[];
|
|
onChange: (value: T) => void;
|
|
size?: 'small' | 'medium' | 'large';
|
|
buttonClassName?: string;
|
|
}
|
|
|
|
const SIZE_CLASSES = {
|
|
small: 'text-xs h-8 px-2 py-1 rounded-md',
|
|
medium: 'text-sm h-9 px-3 py-1.5 rounded-md',
|
|
large: 'text-base h-11 px-4 py-2 rounded-lg',
|
|
} as const;
|
|
|
|
const SELECTED_CLASSES =
|
|
'bg-background text-foreground shadow-sm font-semibold animate-in fade-in-50 zoom-in-95 duration-150';
|
|
const UNSELECTED_CLASSES = 'hover:bg-background/50 hover:text-foreground/80';
|
|
|
|
export default function SwitchButtonGroup<T extends string | number = string>({
|
|
value,
|
|
options,
|
|
onChange,
|
|
size = 'medium',
|
|
className,
|
|
buttonClassName,
|
|
...props
|
|
}: SwitchButtonGroupProps<T>) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'inline-flex w-full items-center justify-center rounded-lg bg-muted text-muted-foreground p-1',
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{options.map((option) => (
|
|
<Button
|
|
key={option.value}
|
|
type="button"
|
|
variant="ghost"
|
|
onClick={() => onChange(option.value)}
|
|
className={cn(
|
|
'flex-1 transition-all',
|
|
SIZE_CLASSES[size],
|
|
value === option.value ? SELECTED_CLASSES : UNSELECTED_CLASSES,
|
|
buttonClassName,
|
|
)}
|
|
>
|
|
{option.label}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|