42 lines
1.1 KiB
TypeScript
42 lines
1.1 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: posts.length, spaceBetween: 24 },
|
||
|
|
}}
|
||
|
|
className="w-full"
|
||
|
|
>
|
||
|
|
{posts.map((post) => (
|
||
|
|
<SwiperSlide key={post.id}>
|
||
|
|
<PostThumb post={post} locale={locale} />
|
||
|
|
</SwiperSlide>
|
||
|
|
))}
|
||
|
|
</Swiper>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|