<!-- source-hash: 7161864532df5559c1bd18aba5ddcb23 -->
A clickable card component that displays a product/vendor category with its associated vendor icons, subcategory count, and product count, linking to a filtered vendor listing page.

## Key Components

- **`CategoriesCart`** — Main exported component accepting `RealCategoryCardProps`
  - `category` — Category object with `slug`, `name`, and `description`
  - `vendors` — Array of vendor objects to display as icons (default: `[]`)
  - `vendorCount` — Total number of products in the category (default: `0`)
  - `subcategoryCount` — Number of subcategories (default: `0`)
  - `isLoading` — Toggles skeleton loading state (default: `false`)
  - `className` — Optional additional CSS classes

## Key Behaviors

| State | Behavior |
|-------|----------|
| `isLoading: true` | Renders 20 animated pulse skeleton placeholders |
| Vendors present | Renders `VendorIcon` components in grayscale/muted style |
| No vendors | Renders 6 grey placeholder icon blocks |

- Navigates to `/vendors?category={slug}` on click
- Highlights border and arrow button in `#FFC008` (Flamingo yellow) on hover
- Applies left/right gradient overlays to fade the vendor icon row

## Usage Example

```typescript
import { CategoriesCart } from './categories-cart';

<CategoriesCart
  category={{
    slug: 'rmm-tools',
    name: 'RMM Tools',
    description: 'Remote monitoring and management platforms for MSPs.',
  }}
  vendors={[{ id: '1', name: 'NinjaRMM', logo: '/logos/ninja.png' }]}
  vendorCount={12}
  subcategoryCount={3}
  isLoading={false}
/>
```