42 lines
834 B
TypeScript
42 lines
834 B
TypeScript
|
import React, { useCallback } from 'react'
|
||
|
|
import cn from '@/utils/classnames'
|
||
|
|
|
||
|
|
type TabProps<T> = {
|
||
|
|
Icon: React.ComponentType<{ isActive: boolean }>
|
||
|
|
value: T
|
||
|
|
label: string
|
||
|
|
isActive: boolean
|
||
|
|
onClick: (value: T) => void
|
||
|
|
}
|
||
|
|
|
||
|
|
const Tab = <T,>({
|
||
|
|
Icon,
|
||
|
|
value,
|
||
|
|
label,
|
||
|
|
isActive,
|
||
|
|
onClick,
|
||
|
|
}: TabProps<T>) => {
|
||
|
|
const handleClick = useCallback(() => {
|
||
|
|
onClick(value)
|
||
|
|
}, [onClick, value])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className='flex cursor-pointer items-center justify-center gap-x-2 px-5 py-3'
|
||
|
|
onClick={handleClick}
|
||
|
|
>
|
||
|
|
<Icon isActive={isActive} />
|
||
|
|
<span
|
||
|
|
className={cn(
|
||
|
|
'system-xl-semibold text-text-secondary',
|
||
|
|
isActive && 'text-saas-dify-blue-accessible',
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{label}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default React.memo(Tab) as typeof Tab
|