81 lines
2.5 KiB
TypeScript
81 lines
2.5 KiB
TypeScript
"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; |