Horizontal scrolling in mobile mode for projects and blogs and add favicon

2025-06-29 15:46:44 +03:30
parent edaea7e1e0
commit cef9c3bbc1
25 changed files with 313 additions and 125 deletions
@@ -0,0 +1,41 @@
+'use client';
+
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { FreeMode } from 'swiper/modules';
+import 'swiper/css';
+import 'swiper/css/free-mode';
+import { IPostThumbResponseData } from '@/app/api/blog/data';
+import { useTranslations } from 'use-intl';
+import routeFactory from '@/assets/constants/routeFactory';
+import { TLocales } from '@/models/layout';
+import PostThumb from './PostThumb';
+
+interface Props {
+  posts: IPostThumbResponseData[];
+  locale: TLocales;
+}
+
+export default function PostsGridViewSlider({ posts, locale }: Props) {
+  const t = useTranslations();
+  const routes = routeFactory(t, locale);
+  return (
+    <div className="w-full">
+      <Swiper
+        modules={[FreeMode]}
+        freeMode
+        spaceBetween={16}
+        breakpoints={{
+          0: { slidesPerView: 1.1 },
+          768: { slidesPerView: posts.length, spaceBetween: 24 },
+        }}
+        className="w-full"
+      >
+        {posts.map((post) => (
+          <SwiperSlide key={post.id}>
+            <PostThumb post={post} locale={locale} />
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </div>
+  );
+}