{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "customer-reviews", "title": "Customer Reviews", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/customer-reviews/customer-reviews.component.ts", "content": "// Product page \"Customer Reviews\" section. Edit the sample data below -- state is local, so wire\n// `toggleHelpful()`, `loadMore()` and `submitReview()` to your own reviews API.\nimport { Component, computed, signal, ChangeDetectionStrategy } from '@angular/core'\nimport { CheckCircle2, Image as ImageIcon, LucideAngularModule, PenLine, Star, ThumbsUp, X } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent, UiAvatarImageComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent } from '@/ui/card/card.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiRatingComponent } from '@/ui/rating/rating.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\n\nexport interface ReviewItem {\n id: string\n author: string\n initials: string\n avatar?: string\n rating: number\n date: string\n title: string\n body: string\n variant: string\n verified: boolean\n helpfulCount: number\n isHelpful?: boolean\n photos?: string[]\n}\n\nexport type ReviewSort = 'recent' | 'highest' | 'lowest' | 'helpful'\n\ninterface RatingBar {\n stars: number\n percentage: number\n count: number\n}\n\ninterface PhotoGalleryItem {\n id: string\n url: string\n alt: string\n author: string\n}\n\nconst ratingBreakdowns: RatingBar[] = [\n { stars: 5, percentage: 78, count: 267 },\n { stars: 4, percentage: 14, count: 48 },\n { stars: 3, percentage: 5, count: 17 },\n { stars: 2, percentage: 2, count: 7 },\n { stars: 1, percentage: 1, count: 3 },\n]\n\nconst customerPhotos: PhotoGalleryItem[] = [\n {\n id: 'p1',\n url: 'https://images.unsplash.com/photo-1546435770-a3e426bf472b?w=400&auto=format&fit=crop&q=80',\n alt: 'Customer photo of matte navy headphones on wood desk',\n author: 'Marcus V.',\n },\n {\n id: 'p2',\n url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&auto=format&fit=crop&q=80',\n alt: 'Customer photo of headphones studio unboxing',\n author: 'Elena R.',\n },\n {\n id: 'p3',\n url: 'https://images.unsplash.com/photo-1484704849700-f032a568e944?w=400&auto=format&fit=crop&q=80',\n alt: 'Customer photo of cushioned earpads close up',\n author: 'Devon C.',\n },\n {\n id: 'p4',\n url: 'https://images.unsplash.com/photo-1583394838336-acd977736f90?w=400&auto=format&fit=crop&q=80',\n alt: 'Customer photo wearing headphones in coffee shop',\n author: 'Amara D.',\n },\n {\n id: 'p5',\n url: 'https://images.unsplash.com/photo-1590658268037-6bf12165a8df?w=400&auto=format&fit=crop&q=80',\n alt: 'Customer photo of travel case and cable accessories',\n author: 'Liam G.',\n },\n {\n id: 'p6',\n url: 'https://images.unsplash.com/photo-1545127398-14699f92334b?w=400&auto=format&fit=crop&q=80',\n alt: 'Customer photo wearing silver headphones while working',\n author: 'Sophia M.',\n },\n]\n\nconst initialReviews: ReviewItem[] = [\n {\n id: 'rev-1',\n author: 'Marcus Vance',\n initials: 'MV',\n avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=160&auto=format&fit=crop&q=80',\n rating: 5,\n date: '2 days ago',\n title: 'Exceeded all my expectations — best studio acoustic fidelity',\n body: 'The soundstage is remarkably wide and bass response is tight without overpowering the mids. Build quality is aerospace-grade, and the memory foam ear cushions remain comfortable even through 8-hour mixing sessions. Multi-device Bluetooth pairing switches directly between MacBook and phone.',\n variant: 'Color: Matte Navy · Size: L',\n verified: true,\n helpfulCount: 24,\n isHelpful: false,\n photos: [\n 'https://images.unsplash.com/photo-1546435770-a3e426bf472b?w=400&auto=format&fit=crop&q=80',\n 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&auto=format&fit=crop&q=80',\n ],\n },\n {\n id: 'rev-2',\n author: 'Elena Rostova',\n initials: 'ER',\n avatar: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=160&auto=format&fit=crop&q=80',\n rating: 5,\n date: '1 week ago',\n title: 'ANC handles subway roar with zero pressure sensation',\n body: 'Active noise cancellation on these is sublime. Unlike other flagships that create an uncomfortable eardrum suction pressure, this feels completely natural. Battery life easily stretches across 4 days of heavy commuting without a recharge.',\n variant: 'Color: Silver Frost · Size: M',\n verified: true,\n helpfulCount: 19,\n isHelpful: false,\n photos: ['https://images.unsplash.com/photo-1583394838336-acd977736f90?w=400&auto=format&fit=crop&q=80'],\n },\n {\n id: 'rev-3',\n author: 'Devon Chen',\n initials: 'DC',\n avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=160&auto=format&fit=crop&q=80',\n rating: 4,\n date: '2 weeks ago',\n title: 'Fantastic sound and ergonomics, case could be slightly slimmer',\n body: 'Everything about audio reproduction is 10/10. The companion app EQ presets are actually tuned well instead of gimmicky. Only minor critique is the hard-shell travel case is a bit bulky for slim laptop bags, but the protection is undisputed.',\n variant: 'Color: Matte Navy · Size: L',\n verified: true,\n helpfulCount: 12,\n isHelpful: false,\n photos: ['https://images.unsplash.com/photo-1484704849700-f032a568e944?w=400&auto=format&fit=crop&q=80'],\n },\n {\n id: 'rev-4',\n author: 'Amara Diallo',\n initials: 'AD',\n avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=160&auto=format&fit=crop&q=80',\n rating: 5,\n date: '3 weeks ago',\n title: 'Crystal-clear microphone quality for all-day client calls',\n body: 'I purchased these primarily for conference calls in a busy open-plan studio. The beamforming microphones filter out nearby background conversations so callers only hear my voice. Lightweight headband design does not induce fatigue.',\n variant: 'Color: Space Black · Size: L',\n verified: true,\n helpfulCount: 8,\n isHelpful: false,\n },\n]\n\nconst extraReviews: ReviewItem[] = [\n {\n id: 'rev-5',\n author: 'Liam Gallagher',\n initials: 'LG',\n avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=160&auto=format&fit=crop&q=80',\n rating: 5,\n date: '1 month ago',\n title: 'Premium finish that justifies every single penny',\n body: 'The anodized aluminum arms and tactile physical dials feel so much better than finicky touch controls in cold weather. Fast USB-C charging gave me 6 hours of playback from a 15-minute coffee break charge.',\n variant: 'Color: Space Black · Size: L',\n verified: true,\n helpfulCount: 15,\n isHelpful: false,\n photos: ['https://images.unsplash.com/photo-1590658268037-6bf12165a8df?w=400&auto=format&fit=crop&q=80'],\n },\n {\n id: 'rev-6',\n author: 'Sophia Martinez',\n initials: 'SM',\n avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=160&auto=format&fit=crop&q=80',\n rating: 4,\n date: '1 month ago',\n title: 'Great balanced frequency response for classical and jazz',\n body: 'Instruments have pinpoint positional separation in spatial mode. The high frequencies are crisp without ever becoming sibilant or harsh at high volume.',\n variant: 'Color: Silver Frost · Size: M',\n verified: false,\n helpfulCount: 6,\n isHelpful: false,\n },\n]\n\nconst sortValues: readonly ReviewSort[] = ['recent', 'highest', 'lowest', 'helpful']\n\n/**\n * CustomerReviews -- the React block, 1:1: a ratings overview card (4.8 score, clickable\n * distribution bars that filter by star count, customer photo grid), a toggleable \"Write Your\n * Review\" form, filter chips + sort select, verified-buyer review cards with attached photos and\n * a reactive Helpful counter, \"Load More Reviews\", and a photo lightbox.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-customer-reviews, [ui-customer-reviews]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout.\n host: { class: 'contents' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarImageComponent,\n UiAvatarFallbackComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiProgressComponent,\n UiRatingComponent,\n UiSelectComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n ],\n template: `\n
\n \n
\n
\n

Customer Reviews

\n

Real feedback from verified purchasers

\n
\n \n \n Write a Review\n \n
\n\n \n
\n
\n \n \n
\n 4.8\n out of 5\n
\n \n

Based on 342 reviews

\n \n \n 96% recommend\n \n
\n\n \n \n @for (bar of ratingBreakdowns; track bar.stars) {\n \n }\n
\n\n \n
\n
\n

Customer Photos (48)

\n Recent\n
\n
\n @for (photo of customerPhotos; track photo.id; let index = $index) {\n \n \n @if (index === 5) {\n \n +43 more\n
\n }\n \n }\n
\n \n \n \n\n \n @if (isWritingReview()) {\n
\n
\n
\n

Write Your Review

\n \n \n \n
\n\n
\n
\n \n \n
\n\n
\n
\n \n \n
\n
\n \n \n
\n
\n\n
\n \n \n
\n\n
\n \n \n
\n\n
\n \n Cancel\n \n \n Submit Review\n \n
\n
\n
\n
\n }\n\n \n
\n \n
\n \n All Ratings\n \n \n @if (selectedRating() === 5) {\n \n } @else {\n \n }\n 5 Stars\n \n \n \n With Photos\n \n \n \n Verified Only\n \n
\n\n \n
\n Sort by:\n \n \n \n Most Recent\n Highest Rated\n Lowest Rated\n Most Helpful\n \n \n
\n
\n\n \n
\n @for (rev of filteredReviews(); track rev.id) {\n
\n
\n \n
\n
\n \n @if (rev.avatar) {\n \n }\n {{ rev.initials }}\n \n
\n
\n {{ rev.author }}\n @if (rev.verified) {\n \n \n Verified Buyer\n \n }\n
\n \n
\n
\n \n
\n\n \n
\n
{{ rev.title }}
\n

{{ rev.body }}

\n
\n\n \n @if (rev.variant) {\n \n {{ rev.variant }}\n
\n }\n\n \n @if (rev.photos && rev.photos.length > 0) {\n
\n @for (photoUrl of rev.photos; track $index; let pIdx = $index) {\n \n \n \n }\n
\n }\n\n \n
\n

Was this review helpful?

\n \n @if (rev.isHelpful) {\n \n } @else {\n \n }\n Helpful ({{ rev.helpfulCount }})\n \n
\n
\n
\n } @empty {\n
\n

No reviews match the selected filters

\n

Try clearing your filters to view all customer feedback

\n \n Reset Filters\n \n
\n }\n \n\n \n
\n

Showing 1-{{ filteredReviews().length }} of 342 reviews

\n @if (!hasLoadedMore()) {\n \n Load More Reviews\n \n }\n
\n\n \n @if (activePhotoUrl(); as photoUrl) {\n \n \n \n
\n Customer Review Photo\n \n Close\n \n
\n \n \n }\n
\n `,\n})\nexport class UiCustomerReviewsComponent {\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly ImageIcon = ImageIcon\n protected readonly PenLine = PenLine\n protected readonly Star = Star\n protected readonly ThumbsUp = ThumbsUp\n protected readonly X = X\n\n protected readonly ratingBreakdowns = ratingBreakdowns\n protected readonly customerPhotos = customerPhotos\n\n readonly reviews = signal(initialReviews)\n readonly selectedRating = signal(null)\n readonly withPhotosOnly = signal(false)\n readonly verifiedOnly = signal(false)\n readonly sortBy = signal('recent')\n readonly isWritingReview = signal(false)\n readonly hasLoadedMore = signal(false)\n readonly activePhotoUrl = signal(null)\n\n // Write review form states\n readonly newRating = signal(5)\n readonly newAuthor = signal('')\n readonly newVariant = signal('Color: Matte Navy · Size: L')\n readonly newTitle = signal('')\n readonly newBody = signal('')\n\n readonly noFilters = computed(() => this.selectedRating() === null && !this.withPhotosOnly() && !this.verifiedOnly())\n\n readonly canSubmit = computed(() => !!this.newTitle().trim() && !!this.newBody().trim() && this.newRating() !== 0)\n\n readonly filteredReviews = computed(() => {\n let result = [...this.reviews()]\n const rating = this.selectedRating()\n\n if (rating !== null) {\n result = result.filter((r) => r.rating === rating)\n }\n\n if (this.withPhotosOnly()) {\n result = result.filter((r) => r.photos && r.photos.length > 0)\n }\n\n if (this.verifiedOnly()) {\n result = result.filter((r) => r.verified)\n }\n\n const sortBy = this.sortBy()\n if (sortBy === 'highest') {\n result.sort((a, b) => b.rating - a.rating)\n } else if (sortBy === 'lowest') {\n result.sort((a, b) => a.rating - b.rating)\n } else if (sortBy === 'helpful') {\n result.sort((a, b) => b.helpfulCount - a.helpfulCount)\n }\n\n return result\n })\n\n protected barClass(stars: number): string {\n return cn(\n 'group hover:bg-muted/60 focus-visible:ring-ring flex w-full items-center gap-3 rounded-md px-2 py-1 text-left text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none',\n this.selectedRating() === stars && 'bg-muted ring-primary/30 font-semibold ring-1',\n )\n }\n\n protected helpfulClass(rev: ReviewItem): string {\n return cn('h-8 gap-1.5 text-xs', rev.isHelpful && 'border-primary/40 bg-primary/10 text-primary font-medium')\n }\n\n protected inputValue(event: Event): string {\n return (event.target as HTMLInputElement | HTMLTextAreaElement).value\n }\n\n setSort(value: string): void {\n const next = sortValues.find((v) => v === value)\n if (next) this.sortBy.set(next)\n }\n\n toggleRatingFilter(stars: number): void {\n this.selectedRating.update((prev) => (prev === stars ? null : stars))\n }\n\n resetFilters(): void {\n this.selectedRating.set(null)\n this.withPhotosOnly.set(false)\n this.verifiedOnly.set(false)\n }\n\n toggleHelpful(reviewId: string): void {\n this.reviews.update((prev) =>\n prev.map((rev) => {\n if (rev.id === reviewId) {\n const nextIsHelpful = !rev.isHelpful\n return {\n ...rev,\n isHelpful: nextIsHelpful,\n helpfulCount: nextIsHelpful ? rev.helpfulCount + 1 : rev.helpfulCount - 1,\n }\n }\n return rev\n }),\n )\n }\n\n loadMore(): void {\n this.reviews.update((prev) => [...prev, ...extraReviews])\n this.hasLoadedMore.set(true)\n }\n\n submitReview(): void {\n if (!this.canSubmit()) return\n const authorName = this.newAuthor().trim() || 'Anonymous User'\n const initials = authorName\n .split(' ')\n .map((n) => n[0])\n .join('')\n .toUpperCase()\n .slice(0, 2)\n\n const created: ReviewItem = {\n id: `rev-${Date.now()}`,\n author: authorName,\n initials,\n rating: this.newRating(),\n date: 'Just now',\n title: this.newTitle().trim(),\n body: this.newBody().trim(),\n variant: this.newVariant().trim() || 'Color: Matte Navy · Size: L',\n verified: true,\n helpfulCount: 0,\n isHelpful: false,\n }\n\n this.reviews.update((prev) => [created, ...prev])\n this.newTitle.set('')\n this.newBody.set('')\n this.newAuthor.set('')\n this.newRating.set(5)\n this.isWritingReview.set(false)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/customer-reviews/customer-reviews.component.ts" }, { "path": "packages/registry-angular/blocks/customer-reviews/index.ts", "content": "export { UiCustomerReviewsComponent, type ReviewItem, type ReviewSort } from './customer-reviews.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/customer-reviews/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/rating.json", "https://uipkge.dev/r/angular/select.json" ], "description": "Dedicated customer reviews section with ratings breakdown, interactive distribution bars, photo gallery with thumbnail overlay, filter chips, sort options, detailed verified buyer cards with attached photos, reactive helpful counter, and review submission form.", "categories": [ "commerce", "ecommerce", "marketing" ] }