A client-side React card component for displaying a product category with its metadata, icon grid, and a navigation button. ## Key Components ### `CategoryCard` A presentational card component that renders category information in a structured layout. **Props (`CategoryCardProps`):** | Prop | Type | Description | |---|---|---| | `name` | `string` | Category display name | | `description` | `string` | Short description text | | `categoryCount` | `number` | Number of subcategories | | `productCount` | `number` | Number of products in the category | | `icons` | `React.ReactNode[]` | Optional array of icon nodes; renders 10 skeleton placeholders if empty | ## Usage Example ```typescript import { CategoryCard } from "./category-card"; import { ServerIcon, DatabaseIcon } from "lucide-react"; export default function Page() { return ( , ]} /> ); } ``` ## Notes - **Client Component** — marked with `"use client"` for React interactivity. - **Icon grid** — renders up to the provided icons; falls back to 10 skeleton placeholder slots when `icons` is empty or omitted. - **Navigation button** — includes an accessible `aria-label` using the category `name`; intended to trigger navigation to a category detail view (wire up an `onClick` or wrap in a link as needed). - Styled with OpenDS design tokens (`ods-*`) for consistent theming across the OpenFrame UI. **Source:** [`category-card.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/category-card.tsx)