58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
"use client";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import httpClient from "@/request/api";
|
|
import { endPoints } from "@/request/links";
|
|
import { useEffect } from "react";
|
|
import CatalogCard from "../../products/catalog";
|
|
import CatalogCardSkeleton from "@/components/loadingSkleton";
|
|
import EmptyData from "@/components/EmptyData";
|
|
import { getRouteLang } from "@/request/getLang";
|
|
import { CategoryType } from "@/lib/types";
|
|
|
|
export default function Catalog() {
|
|
const language = getRouteLang();
|
|
const { data, isLoading } = useQuery({
|
|
queryKey: ["categorycasd", language],
|
|
queryFn: () => httpClient(endPoints.category.all),
|
|
select: (data): CategoryType[] => data?.data?.results,
|
|
});
|
|
useEffect(() => {
|
|
console.log("product catalog data: ", data);
|
|
}, [data]);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{[...Array(3)].map((_, index) => (
|
|
<CatalogCardSkeleton key={index} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Ma'lumot yo'q holati
|
|
if (!data || data.length === 0) {
|
|
return (
|
|
<EmptyData
|
|
title="Katalog topilmadi"
|
|
description="Hozircha kategoriyalar mavjud emas. Keyinroq qaytib keling."
|
|
icon="shopping"
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3 place-items-center">
|
|
{data.map((item, index) => (
|
|
<CatalogCard
|
|
key={index}
|
|
id={item.id}
|
|
title={item.name}
|
|
description={item.description}
|
|
image={item.image}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|