59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import httpClient from "@/request/api";
|
|
import { endPoints } from "@/request/links";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { useCategory } from "@/zustand/useCategory";
|
|
import Card from "./card";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
export function MainSubCategory() {
|
|
const category = useCategory((state) => state.category);
|
|
const t = useTranslations();
|
|
const { data, isLoading, error } = useQuery({
|
|
queryKey: ["subCategory"],
|
|
queryFn: () => httpClient(endPoints.subCategory.byId(category.id)),
|
|
select: (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">
|
|
{t("loading_error")}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!data || data.length === 0) {
|
|
return (
|
|
<div className="text-center text-gray-400 py-10">
|
|
{t("products_not_found")}
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
|
|
{data.map((item: any) => (
|
|
<Card
|
|
key={item.id}
|
|
title={item.name}
|
|
image={item.image}
|
|
slug={item.slug}
|
|
id={item.id}
|
|
category={item.category}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|