Add swiper buttons

src/app/main/page.tsx

@@ -1,11 +1,20 @@
 'use client'
 
 import { useGlobal } from '@/providers/GlobalProvider'
-import 'swiper/css'
 import { Swiper, SwiperSlide } from 'swiper/react'
+import type { Swiper as SwiperType } from 'swiper'
+import { Navigation } from 'swiper/modules'
+import 'swiper/css'
+import 'swiper/css/navigation'
 import { formatDistanceToNow } from 'date-fns'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faEllipsis, faPlay } from '@fortawesome/free-solid-svg-icons'
+import {
+  faChevronLeft,
+  faChevronRight,
+  faEllipsis,
+  faPlay
+} from '@fortawesome/free-solid-svg-icons'
+import { useRef } from 'react'
 
 export default function HomePage () {
   const {
@@ -35,6 +44,10 @@ export default function HomePage () {
       .sort((a, b) => b[1] - a[1])
   )
 
+  const swiperRef = useRef<SwiperType | null>(null)
+  const prevRef = useRef<HTMLButtonElement>(null)
+  const nextRef = useRef<HTMLButtonElement>(null)
+
   return (
     <div className='mx-4 mt-4'>
       <div className='flex flex-col gap-1 mb-4'>
@@ -46,7 +59,26 @@ export default function HomePage () {
         {Object.entries(filteredLaunchesList).length == 0 ? (
           <p className='text-gray-300'>You have no recently launched games</p>
         ) : (
-          <Swiper spaceBetween={16} slidesPerView={2}>
+          <div className='flex flex-col items-center gap-2'>
+            <Swiper
+              modules={[Navigation]}
+              spaceBetween={16}
+              slidesPerView={2}
+              autoHeight={false}
+              className='w-full'
+              onSwiper={swiper => {
+                swiperRef.current = swiper
+              }}
+              onBeforeInit={swiper => {
+                if (
+                  swiper.params.navigation &&
+                  typeof swiper.params.navigation !== 'boolean'
+                ) {
+                  swiper.params.navigation.prevEl = prevRef.current
+                  swiper.params.navigation.nextEl = nextRef.current
+                }
+              }}
+            >
               {Object.entries(filteredLaunchesList).map(([key, timestamp]) => {
                 const versionInfo = serverVersionList?.versions.find(
                   v => v.id == key.split('-').slice(1).join('-')
@@ -88,6 +120,23 @@ export default function HomePage () {
                 )
               })}
             </Swiper>
+            <div className='flex flex-row gap-2'>
+              <button
+                ref={prevRef}
+                onClick={() => swiperRef.current?.slidePrev()}
+                className='button btntheme1 w-8 h-8 flex justify-center items-center'
+              >
+                <FontAwesomeIcon icon={faChevronLeft} />
+              </button>
+              <button
+                ref={nextRef}
+                onClick={() => swiperRef.current?.slideNext()}
+                className='button btntheme1 w-8 h-8 flex justify-center items-center'
+              >
+                <FontAwesomeIcon icon={faChevronRight} />
+              </button>
+            </div>
+          </div>
         )}
       </div>
     </div>