## Installation ```bash npx shadcn@latest add https://ui.cravejs.com/registry/reviews-section.json ``` ## Usage ```tsx import ReviewsSection from "@/components/ui/reviews/reviews-section" const reviews = [ { id: "1", customerName: "John Doe", rating: 5, date: "2024-01-15", content: "Amazing food and great service! Will definitely order again.", verified: true, helpful: 12 }, // ... more reviews ] export function ReviewsExample() { return ( ) } ``` ## Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `reviews` | `Review[]` | - | **Required.** Array of review objects | | `overallRating` | `number` | `4.5` | Overall rating score | | `totalReviews` | `number` | `0` | Total number of reviews | | `ratingDistribution` | `object` | `{ 5: 0, 4: 0, 3: 0, 2: 0, 1: 0 }` | Distribution of ratings | | `className` | `string` | - | Additional CSS classes | | `showPhotos` | `boolean` | `true` | Whether to show review photos | | `showHelpful` | `boolean` | `true` | Whether to show helpful buttons | | `maxReviews` | `number` | - | Maximum reviews to display initially | | `onLoadMore` | `() => void` | - | Callback for loading more reviews | | `isLoading` | `boolean` | `false` | Loading state for load more | ## Review Interface ```tsx interface Review { id: string customerName: string customerAvatar?: string rating: number date: string title?: string content: string verified?: boolean helpful?: number orderItems?: string[] photos?: string[] } ``` ## Examples ### Basic Reviews Section ```tsx const basicReviews = [ { id: "1", customerName: "Sarah Johnson", rating: 5, date: "2024-01-20", content: "Excellent pizza! Fresh ingredients and perfect crust.", verified: true }, { id: "2", customerName: "Mike Chen", rating: 4, date: "2024-01-18", content: "Good food, delivery was a bit slow but worth the wait.", helpful: 8 } ] ``` ### With Photos and Order Items ```tsx const detailedReviews = [ { id: "1", customerName: "Emma Wilson", customerAvatar: "/avatars/emma.jpg", rating: 5, date: "2024-01-22", title: "Amazing Experience!", content: "The burger was cooked to perfection and the fries were crispy. Highly recommend!", verified: true, helpful: 15, orderItems: ["Classic Burger", "Sweet Potato Fries", "Chocolate Shake"], photos: ["/reviews/burger1.jpg", "/reviews/fries1.jpg"] } ] ``` ### With Pagination ```tsx export function PaginatedReviews() { const [reviews, setReviews] = useState(initialReviews) const [isLoading, setIsLoading] = useState(false) const handleLoadMore = async () => { setIsLoading(true) try { const newReviews = await fetchMoreReviews() setReviews(prev => [...prev, ...newReviews]) } finally { setIsLoading(false) } } return ( ) } ``` ## Integration Examples ### With Restaurant Data ```tsx import { useRestaurantReviews } from "@/hooks/use-restaurant-reviews" export function RestaurantReviews({ restaurantId }: { restaurantId: string }) { const { reviews, overallRating, totalReviews, ratingDistribution, loadMore, isLoading } = useRestaurantReviews(restaurantId) return (

What Our Customers Say

Real reviews from verified customers

) } ``` ### With Menu Item Reviews ```tsx export function MenuItemReviews({ itemId }: { itemId: string }) { const { reviews, stats } = useMenuItemReviews(itemId) return (

r.orderItems?.includes(itemId))} overallRating={stats.averageRating} totalReviews={stats.totalReviews} ratingDistribution={stats.distribution} showPhotos={true} maxReviews={5} />

) } ``` ### With Review Form ```tsx export function ReviewsWithForm() { const [reviews, setReviews] = useState(initialReviews) const [showForm, setShowForm] = useState(false) const handleNewReview = (review: Review) => { setReviews(prev => [review, ...prev]) setShowForm(false) } return (

Customer Reviews

{showForm && ( setShowForm(false)} /> )}

) } ``` ## Filtering and Sorting ### Custom Filter Logic ```tsx export function FilterableReviews() { const [reviews] = useState(allReviews) const [filters, setFilters] = useState({ rating: null, verified: false, hasPhotos: false, dateRange: null }) const filteredReviews = reviews.filter(review => { if (filters.rating && review.rating !== filters.rating) return false if (filters.verified && !review.verified) return false if (filters.hasPhotos && !review.photos?.length) return false return true }) return (

setFilters(prev => ({ ...prev, verified: checked as boolean })) } /> Verified only

setFilters(prev => ({ ...prev, hasPhotos: checked as boolean })) } /> With photos

) } ``` ## Analytics and Insights ### Review Analytics ```tsx export function ReviewAnalytics({ reviews }: { reviews: Review[] }) { const analytics = useMemo(() => { const total = reviews.length const averageRating = reviews.reduce((sum, r) => sum + r.rating, 0) / total const verifiedCount = reviews.filter(r => r.verified).length const withPhotosCount = reviews.filter(r => r.photos?.length).length return { total, averageRating, verifiedPercentage: (verifiedCount / total) * 100, photosPercentage: (withPhotosCount / total) * 100 } }, [reviews]) return (

{analytics.total}

Total Reviews

{analytics.averageRating.toFixed(1)}

Average Rating

{analytics.verifiedPercentage.toFixed(0)}%

Verified

{analytics.photosPercentage.toFixed(0)}%

With Photos

) } ``` ## Features - **Rating Display**: Visual star ratings with distribution charts - **Filtering**: Filter by rating, verified status, and more - **Sorting**: Sort by newest, oldest, highest, or lowest rated - **Photo Support**: Display customer photos in reviews - **Verified Reviews**: Show verification badges - **Helpful Voting**: Like/dislike functionality - **Pagination**: Load more reviews on demand - **Order Items**: Show what items were ordered - **Responsive Design**: Works on all screen sizes - **Dark Mode**: Full theme support ## Accessibility - **ARIA Labels**: Proper labeling for screen readers - **Keyboard Navigation**: Full keyboard support - **Focus Management**: Clear focus indicators - **Semantic HTML**: Proper heading hierarchy - **Color Contrast**: High contrast for readability ## Styling The component uses theme-aware styling that adapts to light/dark modes: - Cards: `bg-card` with `border` - Text: `text-foreground` and `text-muted-foreground` - Stars: Yellow fill for active, gray for inactive - Progress bars: Theme-aware colors ## Related Components - [Review Card](/docs/components/reviews/review-card) - Individual review display - [Rating Display](/docs/components/common/rating-display) - Star rating component - [Menu Item Card](/docs/components/menu/menu-item-card) - Menu items with ratings