fix project slider

src/components/pages/project/ProjectThumb.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import Image from 'next/image';
 import Link from 'next/link';
 import Button from '@/components/uikit/button';
@@ -11,12 +13,13 @@ interface Props {
   locale: TLocales;
 }
 
-const ProjectThumb = ({ project, locale }: Props) => {
+export default function ProjectThumb({ project, locale }: Props) {
   const t = useTranslations();
   const routes = routeFactory(t, locale);
+
   return (
     <div className="group flex flex-col gap-3 overflow-hidden bg-white md:gap-5">
-      <div className="relative aspect-[1.4] w-full overflow-hidden rounded-2xl">
+      <div className="relative aspect-[1.09] w-full overflow-hidden rounded-2xl">
         <Image
           src={project.imageSrc}
           alt={project.title}
@@ -24,7 +27,7 @@ const ProjectThumb = ({ project, locale }: Props) => {
           className="h-auto w-full object-cover"
         />
         <div className="invisible absolute inset-0 flex items-center justify-center bg-black/20 opacity-0 backdrop-blur-xs transition-all group-hover:visible group-hover:opacity-100">
-          <Button endIcon="showMore" link={routes.project.route(project.id)}>
+          <Button link={routes.project.route(project.id)} endIcon="showMore">
             {t('com_home_projects_details_CTA')}
           </Button>
         </div>
@@ -38,6 +41,4 @@ const ProjectThumb = ({ project, locale }: Props) => {
       </Link>
     </div>
   );
-};
-
-export default ProjectThumb;
+}

src/components/pages/project/projectsGridSlider.tsx

@@ -1,22 +1,36 @@
 'use client';
 
+import { useEffect, useState } from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { FreeMode } from 'swiper/modules';
 import 'swiper/css';
 import 'swiper/css/free-mode';
+
 import ProjectThumb from './ProjectThumb';
-import { TLocales } from '@/models/layout';
+
 import { IProjectThumbResponseData } from '@/app/api/projects/data';
+import { TLocales } from '@/models/layout';
+import SliderThumbSkeleton from '@/components/layout/sliderSkeleton';
+
+interface Props {
+  projects: IProjectThumbResponseData[];
+  locale: TLocales;
+  className?: string;
+}
 
 export default function ProjectsGridSlider({
   projects,
   locale,
   className = '',
-}: {
-  projects: IProjectThumbResponseData[];
-  locale: TLocales;
-  className?: string;
-}) {
+}: Props) {
+  const [hasMounted, setHasMounted] = useState(false);
+
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  if (!hasMounted) return <SliderThumbSkeleton count={3} />;
+
   return (
     <div className={className}>
       <Swiper
@@ -25,12 +39,15 @@ export default function ProjectsGridSlider({
         spaceBetween={16}
         breakpoints={{
           0: { slidesPerView: 1.1 },
-          768: { slidesPerView: projects.length, spaceBetween: 24 },
+          768: {
+            slidesPerView: Math.min(projects.length, 3),
+            spaceBetween: 24,
+          },
         }}
         className="w-full"
       >
         {projects.map((project) => (
-          <SwiperSlide key={project.id}>
+          <SwiperSlide key={project.id} className="w-auto">
             <ProjectThumb project={project} locale={locale} />
           </SwiperSlide>
         ))}