## Installation ```bash npx shadcn@latest add https://ui.cravejs.com/registry/review-card.json ``` ## Usage ```tsx import ReviewCard from "@/components/ui/reviews/review-card" export function ReviewExample() { return ( ) } ``` ## Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `userName` | `string` | `"Rodolfo C"` | Customer's display name | | `userInitial` | `string` | `"R"` | Initial letter for avatar | | `userColor` | `string` | `"#E8C500"` | Background color for avatar | | `rating` | `number` | `5` | Star rating (1-5) | | `date` | `string` | `"2/15/24"` | Review date | | `orderType` | `string` | `"DoorDash order"` | Type of order | | `comment` | `string` | `"the egg tarts are amazing! all 3 kinds."` | Review comment | | `highlightedItems` | `string[]` | `[]` | Items to highlight as clickable links | ## Features - **User Avatar**: Colored circle with user initials - **Star Ratings**: Visual 5-star rating display - **Order Context**: Shows order type and date - **Highlighted Items**: Clickable menu items in comments - **Responsive Design**: Mobile-optimized layout - **Dark Mode**: Theme-aware styling ## Examples ### Basic Review ```tsx ``` ### Review with Highlighted Menu Items ```tsx ``` ### Lower Rating Review ```tsx ``` ## Customization ### Avatar Colors You can customize the avatar background color: ```tsx ``` ### Highlighted Items Items in the `highlightedItems` array become clickable links: ```tsx ``` ## Styling The component uses theme-aware styling: ```tsx // Text colors adapt to light/dark mode text-foreground // Main text text-muted-foreground // Secondary text text-primary // Highlighted links // Works with all theme configurations ``` ## Integration Examples ### In a Reviews List ```tsx const reviews = [ { userName: "Sarah M", userInitial: "S", userColor: "#10B981", rating: 5, date: "3/22/24", orderType: "Pickup", comment: "Amazing food!" }, // ... more reviews ] return (

{reviews.map((review, index) => ( ))}

) ``` ### With Dynamic Highlighting ```tsx const menuItems = ["ramen", "gyoza", "sushi"] const getHighlightedItems = (comment: string) => { return menuItems.filter(item => comment.toLowerCase().includes(item.toLowerCase()) ) } ``` ## Accessibility - **Semantic HTML**: Proper heading and content structure - **Keyboard Navigation**: Clickable elements support keyboard interaction - **Screen Reader Support**: Meaningful labels and descriptions - **Color Contrast**: Meets WCAG guidelines in all themes ## Related Components - [Reviews Section](/docs/components/reviews/reviews-section) - Complete reviews display with filtering - [Rating Display](/docs/components/ui/rating) - Standalone rating component

Review Card