mirror of https://github.com/djteang/OrangeTV.git
38 lines
965 B
TypeScript
38 lines
965 B
TypeScript
import React from 'react';
|
|
|
|
import { AppFilterTabs } from './ui/HeroPrimitives';
|
|
|
|
interface CapsuleSwitchProps {
|
|
options: { label: string; value: string }[];
|
|
active: string;
|
|
onChange: (value: string) => void;
|
|
className?: string;
|
|
compact?: boolean;
|
|
}
|
|
|
|
const CapsuleSwitch: React.FC<CapsuleSwitchProps> = ({
|
|
options,
|
|
active,
|
|
onChange,
|
|
className,
|
|
compact = false,
|
|
}) => {
|
|
const compactClasses =
|
|
'mx-auto w-fit [&_.tabs__list]:w-fit [&_.tabs__tab]:h-9 [&_.tabs__tab]:w-auto [&_.tabs__tab]:min-w-16 [&_.tabs__tab]:px-4 [&_.tabs__tab]:text-sm';
|
|
|
|
return (
|
|
<AppFilterTabs
|
|
ariaLabel='内容切换'
|
|
className={[compact ? compactClasses : '', className]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
items={options.map((opt) => ({ key: opt.value, label: opt.label }))}
|
|
selectedKey={active}
|
|
variant={compact ? 'primary' : 'secondary'}
|
|
onSelectionChange={onChange}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default CapsuleSwitch;
|