hamid zarghami
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import { clx } from '@/helpers/utils'
|
|
import { type FC } from 'react'
|
|
|
|
type TabItem = {
|
|
label: string
|
|
value: string
|
|
}
|
|
|
|
type Props = {
|
|
items: TabItem[]
|
|
activeTab: string
|
|
onTabChange: (tab: string) => void
|
|
}
|
|
|
|
const Tabs: FC<Props> = (props) => {
|
|
|
|
const { items, activeTab, onTabChange } = props
|
|
|
|
|
|
return (
|
|
<div className='flex justify-center text-sm'>
|
|
<div className='flex gap-4 h-[52px] rounded-full bg-white px-4 items-center'>
|
|
{
|
|
items.map((item) => {
|
|
return (
|
|
<div onClick={() => onTabChange(item.value)} key={item.value} className={clx(
|
|
'h-[32px] flex items-center justify-center w-[122px] cursor-pointer rounded-full',
|
|
activeTab === item.value && 'bg-primary'
|
|
)}>
|
|
{item.label}
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Tabs |