first commit

src/features/category/ui/SubCategory.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { useRouter } from '@/shared/config/i18n/navigation';
+import { categoryList } from '@/widgets/welcome/lib/data';
+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 handleSubCategoryClick = (subCategory: { name: string }) => {
+    router.push(`/category/${categoryId}/${subCategory.name}`);
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-4">
+      <div className="max-w-6xl mx-auto">
+        <h1 className="text-2xl font-semibold text-gray-900 mb-6">
+          {category.name}
+        </h1>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+          {category.subCategories.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>
+    </div>
+  );
+};
+
+export default SubCategory;