A card component that renders a single vendor category with its associated vendor icons, subcategory count, and product count, linking to a filtered vendor listing page. ## Key Components **`CategoriesCart`** (`RealCategoryCardProps`) — Main exported component with props: - `category` — Category object with `slug`, `name`, and `description` - `vendors` — Array of vendor objects to display as icon thumbnails - `vendorCount` — Total product count displayed in the subtitle - `subcategoryCount` — Total subcategory count displayed in the subtitle - `isLoading` — Toggles animated skeleton placeholders for vendor icons - `className` — Optional additional CSS classes ## Usage Example ```typescript import { CategoriesCart } from './categories-cart'; const category = { slug: 'security', name: 'Security', description: 'Endpoint protection, SIEM, and threat detection tools.', }; ``` ## Rendering States | State | Behavior | |---|---| | `isLoading: true` | 20 pulsing skeleton rectangles replace vendor icons | | `vendors.length > 0` | Renders grayscale `VendorIcon` thumbnails in a scrollable row | | `vendors.length === 0` | 6 muted placeholder squares with inner icon stubs | Vendor icons are displayed inside a horizontally clipped row with left/right gradient fade overlays for a soft scroll-edge effect. The entire card is wrapped in a `Link` that navigates to `/vendors?category={slug}`. --- **Source:** [`categories-cart.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/categories-cart.tsx)