mirror of
https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git
synced 2025-05-29 17:45:12 +08:00
7709d9df20
Co-authored-by: NFish <douxc512@gmail.com> Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: twwu <twwu@dify.ai> Co-authored-by: jZonG <jzongcode@gmail.com>
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import type { FC } from 'react'
|
|
import cn from '@/utils/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 flex h-[32px] cursor-pointer items-center rounded-lg border-[0.5px] border-transparent px-3 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary hover:bg-components-main-nav-nav-button-bg-active',
|
|
value === option.value && 'border-components-main-nav-nav-button-border bg-components-main-nav-nav-button-bg-active text-components-main-nav-nav-button-text-active shadow-xs',
|
|
)}
|
|
>
|
|
{option.icon}
|
|
{option.text}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TabSliderNew
|