Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | 'use client';
import React from "react";
import { ProductCard } from "@/components/features/product";
import Image from "next/image";
import Link from "next/link";
import { useBestSellers } from "@/hooks/useProducts";
import { ProductGridSkeleton } from "@/components/ui/Skeleton";
import ErrorMessage from "@/components/ui/ErrorMessage";
const BestSeller = () => {
const { products, loading, error, refetch } = useBestSellers(6);
return (
<section className="overflow-hidden">
<div className="max-w-[1170px] w-full mx-auto px-4 sm:px-8 xl:px-0">
{/* <!-- section title --> */}
<div className="mb-10 flex items-center justify-between">
<div>
<span className="flex items-center gap-2.5 font-medium text-dark dark:text-gray-200 mb-1.5">
<Image
src="/images/icons/icon-07.svg"
alt="icon"
width={17}
height={17}
/>
This Month
</span>
<h2 className="font-semibold text-xl xl:text-heading-5 text-dark dark:text-gray-100">
Best Sellers
</h2>
</div>
</div>
{/* Error State */}
{error && (
<div className="mb-6">
<ErrorMessage
title="Failed to Load Best Sellers"
message={error.message}
onRetry={refetch}
/>
</div>
)}
{/* Loading State */}
{loading && <ProductGridSkeleton count={6} />}
{/* Success State */}
{!loading && !error && (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-7.5">
{products.length === 0 ? (
<div className="col-span-3 text-center py-10">
<p className="text-gray-500">No best sellers at the moment</p>
</div>
) : (
products.map((item, key) => (
<ProductCard key={key} product={item} variant="featured" />
))
)}
</div>
)}
<div className="text-center mt-12.5">
<Link
href="/products"
className="inline-flex font-medium text-custom-sm py-3 px-7 sm:px-12.5 rounded-md border-gray-3 dark:border-gray-600 border bg-gray-1 dark:bg-gray-800 text-dark dark:text-gray-200 ease-out duration-200 hover:bg-dark hover:text-white hover:border-transparent"
>
View All
</Link>
</div>
</div>
</section>
);
};
export default BestSeller;
|