single category page

components/category.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import Link from "next/link";
+
+// حتماً تابع باید اینجا هم حضور داشته باشد
+const generateSlug = (text: string) => {
+    if (!text) return "";
+    return text
+        .trim()
+        .replace(/[\s\u200c]+/g, '-')
+        .replace(/[^\w\u0600-\u06FF0-9\-]/g, '')
+        .replace(/\-\-+/g, '-')
+        .replace(/^-+|-+$/g, '');
+};
+
+interface CategoryProps {
+    categoryName: string; // نام فارسی دسته‌بندی (مثلاً "تجهیزات صنعتی")
+}
+
+export default function CategoryCard({ categoryName }: CategoryProps) {
+    // تبدیل نام فارسی به اسلاگ استاندارد برای URL
+    const categorySlug = generateSlug(categoryName);
+
+    return (
+        // لینک با اسلاگ تولید شده ساخته می‌شود
+        <Link href={`/category/${categorySlug}`} className="block group">
+            <div className="bg-gray-50 rounded-xl p-6 text-center hover:bg-yellow-500 hover:text-white transition-all duration-300">
+                <h3 className="font-bold">
+                    {categoryName}
+                </h3>
+            </div>
+        </Link>
+    );
+}