37 lines
793 B
TypeScript
37 lines
793 B
TypeScript
import React from 'react';
|
|
import { View, Text } from '@tarojs/components';
|
|
import './index.scss';
|
|
|
|
interface Tab {
|
|
key: string;
|
|
label: string;
|
|
}
|
|
|
|
interface SegmentTabsProps {
|
|
tabs: Tab[];
|
|
activeKey: string;
|
|
onChange: (key: string) => void;
|
|
variant?: 'underline' | 'pill';
|
|
}
|
|
|
|
export default React.memo(function SegmentTabs({
|
|
tabs,
|
|
activeKey,
|
|
onChange,
|
|
variant = 'underline',
|
|
}: SegmentTabsProps) {
|
|
return (
|
|
<View className={`seg-tabs seg-tabs--${variant}`}>
|
|
{tabs.map((tab) => (
|
|
<View
|
|
key={tab.key}
|
|
className={`seg-tab ${activeKey === tab.key ? 'seg-tab--active' : ''}`}
|
|
onClick={() => onChange(tab.key)}
|
|
>
|
|
<Text className='seg-tab__text'>{tab.label}</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
);
|
|
});
|