CategoryFilters

Source: apps/jti-next/src/components/CategoryFilters/
Builder.io registration: name "Category filters", model "category"
Default data binding: subcategoriesWithProductCount ← categoryFilters

Renders a horizontal list of subcategory filter tabs. Tapping a tab toggles a filter state that narrows the visible product grid. Integrates with FilterContext via the useHandleFilters hook.

Props (CategoryFiltersProps)

Prop	Type	Default	Description
subcategoriesWithProductCount	SubcategoryFilter[]	required	List of filter options (see shape below)
isProductCountVisible	boolean	false	Show product count badge on each filter tab

SubcategoryFilter shape:

Field	Type	Description
uid	string	Magento category UID
name	string	Display label
checked	boolean	Whether this filter is currently active
productCount	number	Number of products in this subcategory
withSlug	boolean	Whether the subcategory has a dedicated URL
image	string	Category image URL (shown in tab)
newBadge	string	Badge text (e.g. "New")

UI primitive: @jti/ui/eva-components CategoryFilters

Source: packages/ui/src/eva-components/CategoryFilters/CategoryFilters.tsx
⚠️ Deep import — not exported from the main @jti/ui index. Import path: @jti/ui/eva-components/CategoryFilters/CategoryFilters

type CategoryFiltersProps = {
  subcategories: {
    uid: string;
    name: string;
    checked: boolean;
    image: string;
    productCount?: number;
    newBadge?: string;
  }[];
  handleChange: (uid: string) => void;
  isProductCountVisible?: boolean;
  discontinuedProductName?: string | null;
};

Internal behaviour: renders a <ul> of image-based CategoryCheckbox tiles; when discontinuedProductName is provided, shows an AlertBanner informing the user the product has been discontinued. Uses useTranslations for localised labels.