change

src/features/home/ui/category-section.tsx

@@ -0,0 +1,81 @@
+"use client"
+import {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from "@/shared/ui/accordion";
+import {Link} from "@/shared/config/i18n/navigation";
+import { useTranslations } from "next-intl";
+
+
+interface Category {
+  id: number;
+  name: string;
+  image: string;
+  parent_id: number | null;
+  parents: Category[];
+}
+
+interface CategoriesProps {
+  categories: Category[];
+}
+
+const CategoriesSection: React.FC<CategoriesProps> = ({categories}) => {
+  const t = useTranslations("")
+  const renderCategory = (category: Category, level: number = 0) => {
+    const itemValue = `category-${category.id}`;
+    const hasChildren = category.parents && category.parents.length > 0;
+    const hasImage =
+      level === 0 && category.image && !category.image.includes("no_brend.png")
+        ? category.image
+        : null;
+
+    return (
+      <AccordionItem
+        key={category.id}
+        value={itemValue}
+        className={`border-b ${level === 0 ? "border-gray-200" : "border-gray-100"}`}
+      >
+        <AccordionTrigger
+            showArrowIcon={hasChildren}
+          className={`flex items-center  gap-4 p-4 hover:bg-gray-50 transition-colors ${
+            level === 0 ? "text-lg font-semibold" : "text-base font-medium"
+          }`}
+        >
+          <div className={"flex items-center justify-center gap-10"}>
+            {hasImage && (
+              <img
+                src={category.image}
+                alt={category.name}
+                className="w-12 h-12 object-cover rounded-md"
+              />
+            )}
+            {hasChildren ? (
+              <span>{category.name}</span>
+            ) : (
+              <Link href={`/category/${category.id}`}>
+                {category.name}
+              </Link>
+            )}
+          </div>
+        </AccordionTrigger>
+        {hasChildren && (
+          <AccordionContent className="pl-6">
+            <Accordion type="multiple" className="w-full">
+              {category.parents.map((child) => renderCategory(child, level + 1))}
+            </Accordion>
+          </AccordionContent>
+        )}
+      </AccordionItem>
+    );
+  };
+  return (
+      <div className="my-container section-wrapper mx-auto p-4">
+        <h1 className="section-title text-center">{t("Kategoriyalar")}</h1>
+        <Accordion
+            type="multiple"
+            className="w-full rounded-lg grid space-y-10"
+        >
+          {categories.map((category) => renderCategory(category))}
+        </Accordion>
+      </div>
+  );
+};
+
+export default CategoriesSection;