- one more time rework slider

- rework design system
- fill trainer page

src/components/swiper/MediaSwiper.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Swiper, type SwiperProps, type SwiperRef, SwiperSlide } from 'swiper/react'
+import { A11y, Navigation, Pagination } from 'swiper/modules'
+import { cn } from '@/libs/cn'
+import 'swiper/css'
+import 'swiper/css/navigation'
+import 'swiper/css/pagination'
+
+export type MediaSwiperProps = SwiperProps & {
+  images: ImportAttributes[]
+  imageClassName?: string
+}
+
+export const MediaSwiper = React.forwardRef<SwiperRef, MediaSwiperProps>(
+  ({ images, className, modules = [], slideClass, imageClassName, ...otherProps }, ref) => {
+    return (
+      <Swiper
+        ref={ref}
+        modules={[Navigation, Pagination, A11y, ...modules]}
+        slidesPerView={1}
+        pagination={{
+          clickable: true,
+        }}
+        loop={true}
+        watchSlidesProgress={true}
+        className={cn('h-full w-full', className)}
+        {...otherProps}
+      >
+        {images.map((image, index) => (
+          <SwiperSlide key={index} className={slideClass}>
+            <img
+              {...image}
+              loading={index === 0 ? 'eager' : 'lazy'}
+              decoding="async"
+              fetchPriority={index === 0 ? 'high' : 'auto'}
+              className={cn(
+                'aspect-video h-full w-full rounded-3xl object-cover object-center',
+                imageClassName
+              )}
+            />
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    )
+  }
+)
+MediaSwiper.displayName = 'SimpleSwiper'