hamid zarghami
50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
import { FC, ReactNode } from 'react'
|
|
import { clx } from '../helpers/utils'
|
|
import { Swiper, SwiperSlide } from 'swiper/react'
|
|
|
|
type Item = {
|
|
icon: ReactNode,
|
|
label: string,
|
|
value: string,
|
|
}
|
|
|
|
type Props = {
|
|
items: Item[],
|
|
onChange: (value: string) => void,
|
|
active: string,
|
|
}
|
|
|
|
const Tabs: FC<Props> = (props: Props) => {
|
|
|
|
const SWIPER_SLIDE_STYLE = {
|
|
overflow: 'visible !important',
|
|
display: 'flex',
|
|
}
|
|
|
|
return (
|
|
<Swiper
|
|
slidesPerView='auto'
|
|
spaceBetween={20}
|
|
className='px-4 md:px-8 xl:px-10 max-w-full w-fit items-center text-description mx-auto backdrop-blur-md border-2 border-white gap-4 md:gap-6 xl:gap-10 flex h-[60px] md:h-[70px] xl:h-[80px] rounded-[20px] md:rounded-[28px] xl:rounded-[32px] bg-white bg-opacity-45'>
|
|
{
|
|
props.items.map((item: Item, index: number) => {
|
|
return (
|
|
<SwiperSlide style={SWIPER_SLIDE_STYLE} onClick={() => props.onChange(item.value)} key={item.value} className={clx(
|
|
'flex flex-col max-w-fit mt-[10px] md:mt-[12px] xl:mt-[15px] items-center gap-1 md:gap-2 cursor-pointer',
|
|
index === 0 && 'pr-[15px] md:pr-[20px] xl:pr-[30px]',
|
|
index === props.items.length - 1 && props.items.length > 3 && 'pl-[5px]',
|
|
props.active === item.value && 'text-black'
|
|
)}>
|
|
{item.icon}
|
|
<div className='text-[10px] md:text-xs'>
|
|
{item.label}
|
|
</div>
|
|
</SwiperSlide>
|
|
)
|
|
})
|
|
}
|
|
</Swiper>
|
|
)
|
|
}
|
|
|
|
export default Tabs |