added category filter bar; clear filter button

src/components/category/grid/infinite-category-grid.tsx

@@ -7,16 +7,14 @@ import CategoryCard from "../category-card";
 import { useInfiniteItemsObserver } from "@/lib/hooks/infinite-items-observer-hook";
 import { Skeleton } from "@/components/ui/skeleton";
 import { CATEGORY_GRID_CLASS } from "./category-grid";
-// import ArticleFilterBar, { ArticleFilter } from "../article-filter-bar";
+import CategoryFilterBar, { CategoryFilter } from "../category-filter-bar";
 
 export default function InfiniteCategoryGrid() {
-  //   const [filter, setFilter] = React.useState<ArticleFilter | undefined>(
-  //     undefined,
-  //   );
+  const [filter, setFilter] = React.useState<CategoryFilter>({});
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
     api.category.getByCursor.useInfiniteQuery(
       {
-        // filter,
+        filter,
       },
       {
         getNextPageParam: (lastPage) => lastPage.nextCursor,
@@ -39,7 +37,7 @@ export default function InfiniteCategoryGrid() {
 
   return (
     <div className="relative space-y-4">
-      {/* <ArticleFilterBar onFilterUpdate={setFilter} /> */}
+      <CategoryFilterBar onFilterUpdate={setFilter} />
       <menu className={`${CATEGORY_GRID_CLASS} overflow-auto`}>
         {data?.pages?.length
           ? allItems.map((category, idx) => (