zahravaziri
96 lines
2.7 KiB
TypeScript
96 lines
2.7 KiB
TypeScript
// '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: Math.min(posts.length, 3), spaceBetween: 24 },
|
|
// }}
|
|
// className="w-full"
|
|
// >
|
|
// {posts.map((post) => (
|
|
// <SwiperSlide key={post.id} className="w-auto">
|
|
// <PostThumb post={post} locale={locale} />
|
|
// </SwiperSlide>
|
|
// ))}
|
|
// </Swiper>
|
|
// </div>
|
|
// );
|
|
// }
|
|
'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 PostThumb from './PostThumb';
|
|
import { IPostThumbResponseData } from '@/app/api/blog/data';
|
|
import { TLocales } from '@/models/layout';
|
|
import { useTranslations } from 'use-intl';
|
|
import routeFactory from '@/assets/constants/routeFactory';
|
|
import SliderThumbSkeleton from '@/components/layout/sliderSkeleton';
|
|
|
|
interface Props {
|
|
posts: IPostThumbResponseData[];
|
|
locale: TLocales;
|
|
}
|
|
|
|
export default function PostsGridViewSlider({ posts, locale }: Props) {
|
|
const [hasMounted, setHasMounted] = useState(false);
|
|
const t = useTranslations();
|
|
const routes = routeFactory(t, locale);
|
|
|
|
useEffect(() => {
|
|
setHasMounted(true);
|
|
}, []);
|
|
|
|
if (!hasMounted) {
|
|
return <SliderThumbSkeleton count={3} />;
|
|
}
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<Swiper
|
|
modules={[FreeMode]}
|
|
freeMode
|
|
spaceBetween={16}
|
|
breakpoints={{
|
|
0: { slidesPerView: 1.1 },
|
|
768: { slidesPerView: Math.min(posts.length, 3), spaceBetween: 24 },
|
|
}}
|
|
className="w-full"
|
|
>
|
|
{posts.map((post) => (
|
|
<SwiperSlide key={post.id} className="w-auto">
|
|
<PostThumb post={post} locale={locale} />
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</div>
|
|
);
|
|
}
|