add eslint, bug fixes

src/components/services/Services.tsx

@@ -1,7 +1,7 @@
 import type { servicesSchema } from '@/content.config'
 import type { z } from 'astro:content'
-import { useState } from 'react'
-import { SwiperSlide } from 'swiper/react'
+import { useCallback, useRef, useState } from 'react'
+import { type SwiperRef, SwiperSlide } from 'swiper/react'
 import { CharachteristicCard } from './CharachteristicCard'
 import { cn } from '@/libs/cn'
 import { SimpleSwiper } from '../swiper/SimpleSwiper'
@@ -11,9 +11,14 @@ export type ServicesProps = {
 }
 
 export const Services: React.FC<ServicesProps> = ({ services }) => {
+  const swiperRef = useRef<SwiperRef | null>(null)
   const [serviceId, setServiceId] = useState(0)
   const selectedService = services[serviceId]
   const isSelected = (index: number) => index === serviceId
+  const updateServiceHandler = useCallback((index: number) => {
+    setServiceId(index)
+    swiperRef.current?.swiper.slideTo(0)
+  }, [])
 
   return (
     <div className="flex flex-col gap-5">
@@ -22,14 +27,14 @@ export const Services: React.FC<ServicesProps> = ({ services }) => {
           <SwiperSlide style={{ width: 'auto' }} key={index}>
             <button
               className={cn('tag-btn', isSelected(index) && 'tag-btn-active')}
-              onClick={() => setServiceId(index)}
+              onClick={() => updateServiceHandler(index)}
             >
               {service.title}
             </button>
           </SwiperSlide>
         ))}
       </SimpleSwiper>
-      <SimpleSwiper>
+      <SimpleSwiper ref={swiperRef}>
         {selectedService.charachteristics?.map((charachteristic, index) => (
           <SwiperSlide
             className="aspect-3/4 !h-auto w-full max-w-[262px] md:max-w-[320px]"