57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { category_api } from '@/shared/config/api/category/api';
|
|
import { useRouter } from '@/shared/config/i18n/navigation';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { ChevronRight } from 'lucide-react';
|
|
import { useParams } from 'next/navigation';
|
|
|
|
const SubCategory = () => {
|
|
const { categoryId } = useParams();
|
|
|
|
const { data: category } = useQuery({
|
|
queryKey: ['category_list'],
|
|
queryFn: () => category_api.getCategory({ page: 1, page_size: 99 }),
|
|
select(data) {
|
|
return data.data;
|
|
},
|
|
});
|
|
|
|
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}`);
|
|
};
|
|
|
|
return (
|
|
<div className="custom-container">
|
|
<>
|
|
<h1 className="text-2xl font-semibold text-gray-900 mb-6">
|
|
{categorys?.name}
|
|
</h1>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
|
{categorys?.product_types.map((subCategory, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => handleSubCategoryClick(subCategory)}
|
|
className="bg-white border border-gray-200 rounded-lg p-4 flex items-center justify-between hover:border-gray-300 transition-colors"
|
|
>
|
|
<span className="text-gray-900 font-medium">
|
|
{subCategory.name}
|
|
</span>
|
|
<ChevronRight className="w-5 h-5 text-gray-400" />
|
|
</button>
|
|
))}
|
|
</div>
|
|
</>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SubCategory;
|