mirror of
https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git
synced 2025-05-14 08:48:22 +08:00
7753ba2d37
Co-authored-by: Joel <iamjoel007@gmail.com> Co-authored-by: Yeuoly <admin@srmxy.cn> Co-authored-by: JzoNg <jzongcode@gmail.com> Co-authored-by: StyleZhang <jasonapring2015@outlook.com> Co-authored-by: jyong <jyong@dify.ai> Co-authored-by: nite-knite <nkCoding@gmail.com> Co-authored-by: jyong <718720800@qq.com>
41 lines
1000 B
TypeScript
41 lines
1000 B
TypeScript
import type { FC } from 'react'
|
|
import cn from 'classnames'
|
|
|
|
type Option = {
|
|
value: string
|
|
text: string
|
|
icon?: React.ReactNode
|
|
}
|
|
type TabSliderProps = {
|
|
className?: string
|
|
value: string
|
|
onChange: (v: string) => void
|
|
options: Option[]
|
|
}
|
|
const TabSliderNew: FC<TabSliderProps> = ({
|
|
className,
|
|
value,
|
|
onChange,
|
|
options,
|
|
}) => {
|
|
return (
|
|
<div className={cn(className, 'relative flex')}>
|
|
{options.map(option => (
|
|
<div
|
|
key={option.value}
|
|
onClick={() => onChange(option.value)}
|
|
className={cn(
|
|
'mr-1 px-3 py-[7px] h-[32px] flex items-center rounded-lg border-[0.5px] border-transparent text-gray-700 text-[13px] font-medium leading-[18px] cursor-pointer hover:bg-gray-200',
|
|
value === option.value && 'bg-white border-gray-200 shadow-xs text-primary-600 hover:bg-white',
|
|
)}
|
|
>
|
|
{option.icon}
|
|
{option.text}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TabSliderNew
|