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,48 +59,84 @@ 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'>
-            {Object.entries(filteredLaunchesList).map(([key, timestamp]) => {
+            <Swiper
-              const versionInfo = serverVersionList?.versions.find(
+              modules={[Navigation]}
-                v => v.id == key.split('-').slice(1).join('-')
+              spaceBetween={16}
-              )
+              slidesPerView={2}
-              if (!versionInfo) return
+              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('-')
+                )
+                if (!versionInfo) return
 
-              return (
+                return (
-                <SwiperSlide
+                  <SwiperSlide
-                  key={key}
+                    key={key}
-                  className='flex flex-col gap-2 bg-(--col1) border border-(--col3) rounded-lg px-3 py-2'
+                    className='flex flex-col gap-2 bg-(--col1) border border-(--col3) rounded-lg px-3 py-2'
-                >
+                  >
-                  <p className='truncate text-2xl'>
+                    <p className='truncate text-2xl'>
-                    {versionInfo?.displayName}
+                      {versionInfo?.displayName}
-                  </p>
+                    </p>
-                  <p className='truncate text-gray-300'>
+                    <p className='truncate text-gray-300'>
-                    Last played{' '}
+                      Last played{' '}
-                    {formatDistanceToNow(new Date(timestamp), {
+                      {formatDistanceToNow(new Date(timestamp), {
-                      addSuffix: true
+                        addSuffix: true
-                    })}
+                      })}
-                  </p>
+                    </p>
-                  <div className='flex flex-row gap-2 my-1'>
+                    <div className='flex flex-row gap-2 my-1'>
-                    <FontAwesomeIcon
+                      <FontAwesomeIcon
-                      icon={faPlay}
+                        icon={faPlay}
-                      className='button btntheme1'
+                        className='button btntheme1'
-                      onClick={async () => await launchGame(versionInfo)}
+                        onClick={async () => await launchGame(versionInfo)}
-                    />
+                      />
-                    <FontAwesomeIcon
+                      <FontAwesomeIcon
-                      icon={faEllipsis}
+                        icon={faEllipsis}
-                      className='button btntheme1'
+                        className='button btntheme1'
-                      onClick={() => {
+                        onClick={() => {
-                        setManagingVersion(versionInfo.id)
+                          setManagingVersion(versionInfo.id)
-                        setPopupMode(2)
+                          setPopupMode(2)
-                        setShowPopup(true)
+                          setShowPopup(true)
-                        setFadeOut(false)
+                          setFadeOut(false)
-                      }}
+                        }}
-                    />
+                      />
-                  </div>
+                    </div>
-                </SwiperSlide>
+                  </SwiperSlide>
-              )
+                )
-            })}
+              })}
-          </Swiper>
+            </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>