complated order

src/features/category/ui/SubCategory.tsx

@@ -1,30 +1,43 @@
 'use client';
 
+import { category_api } from '@/shared/config/api/category/api';
 import { useRouter } from '@/shared/config/i18n/navigation';
-import { categoryList } from '@/widgets/welcome/lib/data';
+import { useQuery } from '@tanstack/react-query';
 import { ChevronRight } from 'lucide-react';
 import { useParams } from 'next/navigation';
 
 const SubCategory = () => {
   const { categoryId } = useParams();
 
-  const router = useRouter();
-  const category =
-    categoryList.find((cat) => cat.name === categoryId) || categoryList[0];
+  const { data: category } = useQuery({
+    queryKey: ['category_list'],
+    queryFn: () => category_api.getCategory({ page: 1, page_size: 99 }),
+    select(data) {
+      return data.data;
+    },
+  });
 
-  const handleSubCategoryClick = (subCategory: { name: string }) => {
-    router.push(`/category/${categoryId}/${subCategory.name}`);
+  const router = useRouter();
+  const categorys = category?.find((cat) => cat.id === Number(categoryId));
+
+  const handleSubCategoryClick = (subCategory: {
+    name: string;
+    id: number;
+  }) => {
+    router.push(`/category/${categoryId}/${subCategory.id}`);
   };
 
+  console.log(categorys);
+
   return (
     <div className="custom-container">
       <>
         <h1 className="text-2xl font-semibold text-gray-900 mb-6">
-          {category.name}
+          {categorys?.name}
         </h1>
 
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
-          {category.subCategories.map((subCategory, index) => (
+          {categorys?.product_types.map((subCategory, index) => (
             <button
               key={index}
               onClick={() => handleSubCategoryClick(subCategory)}