File size: 1,493 Bytes
a8b3f00 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
'use client'
import type { FC } from 'react'
import React from 'react'
import cn from '@/utils/classnames'
type Option = {
value: string
text: string | JSX.Element
}
type ItemProps = {
className?: string
isActive: boolean
onClick: (v: string) => void
option: Option
}
const Item: FC<ItemProps> = ({
className,
isActive,
onClick,
option,
}) => {
return (
<div
key={option.value}
className={cn(className, !isActive && 'cursor-pointer', 'relative pb-2.5 leading-6 text-base font-semibold')}
onClick={() => !isActive && onClick(option.value)}
>
<div className={cn(isActive ? 'text-gray-900' : 'text-gray-600')}>{option.text}</div>
{isActive && (
<div className='absolute bottom-0 left-0 right-0 h-0.5 bg-[#155EEF]'></div>
)}
</div>
)
}
type Props = {
className?: string
value: string
onChange: (v: string) => void
options: Option[]
noBorderBottom?: boolean
itemClassName?: string
}
const TabSlider: FC<Props> = ({
className,
value,
onChange,
options,
noBorderBottom,
itemClassName,
}) => {
return (
<div className={cn(className, !noBorderBottom && 'border-b border-[#EAECF0]', 'flex space-x-6')}>
{options.map(option => (
<Item
isActive={option.value === value}
option={option}
onClick={onChange}
key={option.value}
className={itemClassName}
/>
))}
</div>
)
}
export default React.memo(TabSlider)
|