add pagination for last cases lists
This commit is contained in:
@@ -4,7 +4,7 @@ import { useLastComplaints } from '@/app/hooks/react-query/useLastComplaints';
|
||||
import { useLastCases } from '@/app/hooks/react-query/useLastCases';
|
||||
import { formatDate, formatDateTime } from '@/app/lib/formatDate';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useEffect, useState, useRef } from 'react';
|
||||
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Navigation, Pagination } from 'swiper/modules';
|
||||
@@ -17,6 +17,7 @@ type FilterState = {
|
||||
};
|
||||
|
||||
export default function ViolationsLastCombinedCases() {
|
||||
const swiperRef = useRef(null);
|
||||
const t = useTranslations('Global');
|
||||
const [filters, setFilters] = useState<FilterState>({
|
||||
complaints: true,
|
||||
@@ -123,6 +124,13 @@ export default function ViolationsLastCombinedCases() {
|
||||
}
|
||||
},
|
||||
loop: filteredItems.length > 3,
|
||||
pagination: {
|
||||
el: '.custom-pagination-container', // Кастомный контейнер для пагинации
|
||||
clickable: true,
|
||||
},
|
||||
onSwiper: (swiper: any) => {
|
||||
swiperRef.current = swiper;
|
||||
}
|
||||
};
|
||||
|
||||
const isLoading = (!dataComplaint || !dataCases);
|
||||
@@ -226,6 +234,9 @@ export default function ViolationsLastCombinedCases() {
|
||||
</Swiper>
|
||||
)}
|
||||
</div>
|
||||
{!isNothingSelected && filteredItems.length > 0 && (
|
||||
<div className="custom-pagination-container text-center"></div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user