60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
"use client";
|
|
import httpClient from "@/request/api";
|
|
import { endPoints } from "@/request/links";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import ProductCard from "./productCard";
|
|
import { useCategory } from "@/store/useCategory";
|
|
|
|
export default function MainProduct() {
|
|
const category = useCategory((state) => state.category);
|
|
|
|
const requestLink = category.have_sub_category
|
|
? endPoints.subCategory.byId(category.id)
|
|
: endPoints.product.byCategory(category.id || 0);
|
|
|
|
const { data, isLoading, error } = useQuery({
|
|
queryKey: ["products", category.id],
|
|
queryFn: () => httpClient(requestLink),
|
|
select: (data) => data?.data?.data?.results,
|
|
});
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
|
|
{[1, 2, 3].map((i) => (
|
|
<div key={i} className="h-96 bg-gray-800 animate-pulse rounded-2xl" />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="text-center text-red-500 py-10">
|
|
Ma'lumotlarni yuklashda xatolik yuz berdi
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!data || data.length === 0) {
|
|
return (
|
|
<div className="text-center text-gray-400 py-10">
|
|
Mahsulotlar topilmadi
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
|
|
{data.map((item: any) => (
|
|
<ProductCard
|
|
key={item.id} // ✅ index o'rniga id ishlatish
|
|
title={item.name}
|
|
image={item.image}
|
|
slug={item.slug}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|