links and other responive

src/components/Tabs.tsx

@@ -1,5 +1,6 @@
 import { FC, ReactNode } from 'react'
 import { clx } from '../helpers/utils'
+import { Swiper, SwiperSlide } from 'swiper/react'
 
 type Item = {
     icon: ReactNode,
@@ -14,24 +15,35 @@ type Props = {
 }
 
 const Tabs: FC<Props> = (props: Props) => {
+
+    const SWIPER_SLIDE_STYLE = {
+        overflow: 'visible !important',
+        display: 'flex',
+    }
+
     return (
-        <div className='px-10  w-fit items-center text-description mx-auto backdrop-blur-md border-2 border-white gap-10 flex h-[80px] rounded-[32px] bg-white bg-opacity-45'>
+        <Swiper
+            slidesPerView='auto'
+            spaceBetween={30}
+            className='px-10 max-w-full w-fit items-center text-description mx-auto backdrop-blur-md border-2 border-white gap-10 flex h-[80px] rounded-[32px] bg-white bg-opacity-45'>
             {
-                props.items.map((item: Item) => {
+                props.items.map((item: Item, index: number) => {
                     return (
-                        <div onClick={() => props.onChange(item.value)} key={item.value} className={clx(
-                            'flex flex-col items-center gap-2 cursor-pointer',
+                        <SwiperSlide style={SWIPER_SLIDE_STYLE} onClick={() => props.onChange(item.value)} key={item.value} className={clx(
+                            'flex flex-col max-w-fit mt-[15px] items-center gap-2 cursor-pointer',
+                            index === 0 && 'pr-[30px]',
+                            index === props.items.length - 1 && 'pl-[30px]',
                             props.active === item.value && 'text-black'
                         )}>
                             {item.icon}
                             <div className='text-xs'>
                                 {item.label}
                             </div>
-                        </div>
+                        </SwiperSlide>
                     )
                 })
             }
-        </div>
+        </Swiper>
     )
 }