show subcategory

src/app/[name]/(Main)/components/CategoryScroll.tsx

@@ -42,52 +42,69 @@ const CategoryScroll = ({
   className,
 }: Props) => {
   const { renderer: Renderer, imageSize } = variantConfig[variant];
+  const selectedParent =
+    categories.find((c) => c.id === selectedCategory) ??
+    categories.find((c) => c.children?.some((ch) => ch.id === selectedCategory));
+  const children = selectedParent?.children ?? [];
 
   const handleSelect = (categoryId: string) => () => onSelect(categoryId);
 
   return (
-    <HorizontalScrollView
-      className={clsx(
-        "w-full noscrollbar py-4!",
-        variant === "large" && "mt-4!",
-        className
-      )}
-    >
-      {/* <Renderer
-        key="all"
-        className={clsx(selectedCategory === "0" && "bg-container!")}
-        onClick={handleSelect(0)}
+    <div className="flex flex-col">
+      <HorizontalScrollView
+        className={clsx(
+          "w-full noscrollbar pt-4! pb-1!",
+          variant === "large" && "mt-4!",
+          className
+        )}
       >
-        <Image
-          priority
-          src="/assets/images/food-image.png"
-          width={imageSize}
-          height={imageSize}
-          alt="category image"
-        />
-        <span className="text-xs text-foreground">همه</span>
-      </Renderer> */}
-      {categories.map((item) => {
-        const isSelected = item.id === selectedCategory;
+        {categories.map((item) => {
+          const isSelected =
+            item.id === selectedCategory ||
+            item.children?.some((ch) => ch.id === selectedCategory);
 
-        return (
-          <Renderer
-            key={item.id}
-            className={clsx(isSelected && "bg-container!")}
-            onClick={handleSelect(item.id)}
-          >
-            <Image
-              priority
-              src={item.avatarUrl || "/assets/images/food-image.png"}
-              width={imageSize}
-              height={imageSize}
-              alt="category image"
-            />
-            <span className="text-xs text-foreground text-center">{item.title}</span>
-          </Renderer>
-        );
-      })}
-    </HorizontalScrollView>
+          return (
+            <Renderer
+              key={item.id}
+              className={clsx(isSelected && "bg-container!")}
+              onClick={handleSelect(item.id)}
+            >
+              <Image
+                priority
+                src={item.avatarUrl || "/assets/images/food-image.png"}
+                width={imageSize}
+                height={imageSize}
+                alt="category image"
+              />
+              <span className="text-xs text-foreground text-center">{item.title}</span>
+            </Renderer>
+          );
+        })}
+      </HorizontalScrollView>
+
+      {children.length > 0 && (
+        <HorizontalScrollView
+          className={clsx(
+            "w-full noscrollbar py-2!",
+            variant === "small" && "py-1!"
+          )}
+        >
+          {children.map((child) => {
+            const isChildSelected = child.id === selectedCategory;
+
+            return (
+              <CategorySmallItemRenderer
+                key={child.id}
+                className={clsx(isChildSelected && "bg-container!")}
+                onClick={handleSelect(child.id)}
+              >
+                <span className="text-[10px] text-foreground whitespace-nowrap">{child.title}</span>
+              </CategorySmallItemRenderer>
+            );
+          })}
+        </HorizontalScrollView>
+      )}
+    </div>
   );
 };