Unified card skeleton component providing consistent loading states for the four card types used across the application (`vendor`, `blog`, `category`, `alternative`). ## Key Components | Export | Description | |---|---| | `CardSkeleton` | Single card skeleton with variant-based layout rendering | | `CardSkeletonGrid` | Responsive grid of `CardSkeleton` instances for list loading states | | `VendorCardContent` | Internal — logo, title, description, stats, and tag area | | `BlogCardContent` | Internal — OG image, title, chips, description, author, and metadata footer | | `CategoryCardContent` | Internal — icon grid, title, description, and action button | | `AlternativeCardContent` | Internal — avatar, title, description, and optional action button | ### `CardSkeletonProps` | Prop | Type | Default | Description | |---|---|---|---| | `variant` | `'vendor' \| 'blog' \| 'category' \| 'alternative'` | `'vendor'` | Selects the matching card layout | | `showActions` | `boolean` | `true` | Renders action button area | | `showMetadata` | `boolean` | `true` | Renders footer metadata row | | `containerClassName` | `string` | — | Overrides default card background and border classes | | `className` | `string` | — | Appended to the card container | ## Usage Example ```typescript import { CardSkeleton, CardSkeletonGrid } from "@/components/skeletons/card-skeleton" // Single vendor card loading state // Blog card without metadata footer // Grid of 9 vendor skeletons // Grid of blog skeletons with custom container style ``` > Grid column counts are variant-aware: `vendor` uses a 3-column layout at `lg`, `blog` uses 2-column at `md`, `category` uses 4-column at `lg`, and `alternative` is always single-column.