1#@!#!123s

ALWAYS HENGHENG888 1#@!#!123s
: / var / www / chinawholesale-frontend-next / src / components / pages / newArrive /
Filename : LatestArrivedProduct.js
back
'use client';
import React, {useEffect} from "react";
import RecentItems from "../home/includes/Products/recentProduct/includes/RecentItems";
import {Pagination} from "antd";
import {useSettings} from "@/api/generale";
import {useRouter} from "next/navigation";
import {useNewArrivedProducts} from "@/api/product-api";
import {goPageTop} from "@/helpers/helpers";
import ProductSectionSkeleton from "@/components/skeleton/ProductSectionSkeleton";

const LatestArrivedProduct = ({searchParams}) => {
	const history = useRouter();
	const page = searchParams?.page || 1;

	const settings = useSettings()
	const {data, isLoading} = useNewArrivedProducts(searchParams);

	useEffect(() => {
		goPageTop();
	}, [searchParams]);


	const handlePaginationClick = (paginate) => {
		history.push(`/new-arrived?page=${paginate}`);
	};

	const products = data?.products || [];
	const TotalCount = data?.TotalCount || 0;


	return (
		<section className="my-3 lg:my-5">
			<div className="container">
				<div className={'bg-white rounded-[6px]'}>
					<div
						className={'border-b border-solid border-[#f0f0f0] px-2 py-2 lg:px-3 lg:py-2 flex justify-between items-center'}>
						<h2 className={'text-xl font-semibold capitalize'}>New Arrived Products</h2>
					</div>

					<div className={'p-2 lg:p-3'}>
						{
							isLoading ?
								<ProductSectionSkeleton/>
								:
								<RecentItems products={products} settings={settings}/>
						}
					</div>

					{
						products?.length > 0 &&
						<div className={'block py-8 text-center'}>
							<Pagination
								defaultCurrent={page}
								total={TotalCount}
								pageSize={36}
								defaultPageSize={36}
								onChange={handlePaginationClick}
								showSizeChanger={false}
								responsive={true}
							/>
						</div>
					}

				</div>
			</div>

		</section>
	);
};


export default LatestArrivedProduct;