61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T6f00,'use client' import * as React from 'react' import { CheckCircle2, Image as ImageIcon, PenLine, Star, ThumbsUp, X } from 'lucide-react' import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Card } from '@/components/ui/card' import { Progress } from '@/components/ui/progress' import { Rating } from '@/components/ui/rating' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { cn } from '@/lib/utils' export interface ReviewItem { id: string author: string initials: string avatar?: string rating: number date: string title: string body: string variant: string verified: boolean helpfulCount: number isHelpful?: boolean photos?: string[] } interface RatingBar { stars: number percentage: number count: number } interface PhotoGalleryItem { id: string url: string alt: string author: string } const ratingBreakdowns: RatingBar[] = [ { stars: 5, percentage: 78, count: 267 }, { stars: 4, percentage: 14, count: 48 }, { stars: 3, percentage: 5, count: 17 }, { stars: 2, percentage: 2, count: 7 }, { stars: 1, percentage: 1, count: 3 }, ] const customerPhotos: PhotoGalleryItem[] = [ { id: 'p1', url: 'https://images.unsplash.com/photo-1546435770-a3e426bf472b?w=400&auto=format&fit=crop&q=80', alt: 'Customer photo of matte navy headphones on wood desk', author: 'Marcus V.', }, { id: 'p2', url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&auto=format&fit=crop&q=80', alt: 'Customer photo of headphones studio unboxing', author: 'Elena R.', }, { id: 'p3', url: 'https://images.unsplash.com/photo-1484704849700-f032a568e944?w=400&auto=format&fit=crop&q=80', alt: 'Customer photo of cushioned earpads close up', author: 'Devon C.', }, { id: 'p4', url: 'https://images.unsplash.com/photo-1583394838336-acd977736f90?w=400&auto=format&fit=crop&q=80', alt: 'Customer photo wearing headphones in coffee shop', author: 'Amara D.', }, { id: 'p5', url: 'https://images.unsplash.com/photo-1590658268037-6bf12165a8df?w=400&auto=format&fit=crop&q=80', alt: 'Customer photo of travel case and cable accessories', author: 'Liam G.', }, { id: 'p6', url: 'https://images.unsplash.com/photo-1545127398-14699f92334b?w=400&auto=format&fit=crop&q=80', alt: 'Customer photo wearing silver headphones while working', author: 'Sophia M.', }, ] const initialReviews: ReviewItem[] = [ { id: 'rev-1', author: 'Marcus Vance', initials: 'MV', avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=160&auto=format&fit=crop&q=80', rating: 5, date: '2 days ago', title: 'Exceeded all my expectations — best studio acoustic fidelity', 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.', variant: 'Color: Matte Navy · Size: L', verified: true, helpfulCount: 24, isHelpful: false, photos: [ 'https://images.unsplash.com/photo-1546435770-a3e426bf472b?w=400&auto=format&fit=crop&q=80', 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&auto=format&fit=crop&q=80', ], }, { id: 'rev-2', author: 'Elena Rostova', initials: 'ER', avatar: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=160&auto=format&fit=crop&q=80', rating: 5, date: '1 week ago', title: 'ANC handles subway roar with zero pressure sensation', 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.', variant: 'Color: Silver Frost · Size: M', verified: true, helpfulCount: 19, isHelpful: false, photos: ['https://images.unsplash.com/photo-1583394838336-acd977736f90?w=400&auto=format&fit=crop&q=80'], }, { id: 'rev-3', author: 'Devon Chen', initials: 'DC', avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=160&auto=format&fit=crop&q=80', rating: 4, date: '2 weeks ago', title: 'Fantastic sound and ergonomics, case could be slightly slimmer', 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.', variant: 'Color: Matte Navy · Size: L', verified: true, helpfulCount: 12, isHelpful: false, photos: ['https://images.unsplash.com/photo-1484704849700-f032a568e944?w=400&auto=format&fit=crop&q=80'], }, { id: 'rev-4', author: 'Amara Diallo', initials: 'AD', avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=160&auto=format&fit=crop&q=80', rating: 5, date: '3 weeks ago', title: 'Crystal-clear microphone quality for all-day client calls', 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.', variant: 'Color: Space Black · Size: L', verified: true, helpfulCount: 8, isHelpful: false, }, ] const extraReviews: ReviewItem[] = [ { id: 'rev-5', author: 'Liam Gallagher', initials: 'LG', avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=160&auto=format&fit=crop&q=80', rating: 5, date: '1 month ago', title: 'Premium finish that justifies every single penny', 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.', variant: 'Color: Space Black · Size: L', verified: true, helpfulCount: 15, isHelpful: false, photos: ['https://images.unsplash.com/photo-1590658268037-6bf12165a8df?w=400&auto=format&fit=crop&q=80'], }, { id: 'rev-6', author: 'Sophia Martinez', initials: 'SM', avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=160&auto=format&fit=crop&q=80', rating: 4, date: '1 month ago', title: 'Great balanced frequency response for classical and jazz', body: 'Instruments have pinpoint positional separation in spatial mode. The high frequencies are crisp without ever becoming sibilant or harsh at high volume.', variant: 'Color: Silver Frost · Size: M', verified: false, helpfulCount: 6, isHelpful: false, }, ] export function CustomerReviews() { const [reviews, setReviews] = React.useState(initialReviews) const [selectedRating, setSelectedRating] = React.useState(null) const [withPhotosOnly, setWithPhotosOnly] = React.useState(false) const [verifiedOnly, setVerifiedOnly] = React.useState(false) const [sortBy, setSortBy] = React.useState<'recent' | 'highest' | 'lowest' | 'helpful'>('recent') const [isWritingReview, setIsWritingReview] = React.useState(false) const [hasLoadedMore, setHasLoadedMore] = React.useState(false) const [activePhotoUrl, setActivePhotoUrl] = React.useState(null) // Write review form states const [newRating, setNewRating] = React.useState(5) const [newAuthor, setNewAuthor] = React.useState('') const [newVariant, setNewVariant] = React.useState('Color: Matte Navy · Size: L') const [newTitle, setNewTitle] = React.useState('') const [newBody, setNewBody] = React.useState('') function toggleRatingFilter(stars: number) { setSelectedRating((prev) => (prev === stars ? null : stars)) } function resetFilters() { setSelectedRating(null) setWithPhotosOnly(false) setVerifiedOnly(false) } function toggleHelpful(reviewId: string) { setReviews((prev) => prev.map((rev) => { if (rev.id === reviewId) { const nextIsHelpful = !rev.isHelpful return { ...rev, isHelpful: nextIsHelpful, helpfulCount: nextIsHelpful ? rev.helpfulCount + 1 : rev.helpfulCount - 1, } } return rev }), ) } function loadMore() { setReviews((prev) => [...prev, ...extraReviews]) setHasLoadedMore(true) } function submitReview() { if (!newTitle.trim() || !newBody.trim() || newRating === 0) return const authorName = newAuthor.trim() || 'Anonymous User' const initials = authorName .split(' ') .map((n) => n[0]) .join('') .toUpperCase() .slice(0, 2) const created: ReviewItem = { id: `rev-${Date.now()}`, author: authorName, initials, rating: newRating, date: 'Just now', title: newTitle.trim(), body: newBody.trim(), variant: newVariant.trim() || 'Color: Matte Navy · Size: L', verified: true, helpfulCount: 0, isHelpful: false, } setReviews((prev) => [created, ...prev]) setNewTitle('') setNewBody('') setNewAuthor('') setNewRating(5) setIsWritingReview(false) } const filteredReviews = React.useMemo(() => { let result = [...reviews] if (selectedRating !== null) { result = result.filter((r) => r.rating === selectedRating) } if (withPhotosOnly) { result = result.filter((r) => r.photos && r.photos.length > 0) } if (verifiedOnly) { result = result.filter((r) => r.verified) } if (sortBy === 'highest') { result.sort((a, b) => b.rating - a.rating) } else if (sortBy === 'lowest') { result.sort((a, b) => a.rating - b.rating) } else if (sortBy === 'helpful') { result.sort((a, b) => b.helpfulCount - a.helpfulCount) } return result }, [reviews, selectedRating, withPhotosOnly, verifiedOnly, sortBy]) return (

{/* Section Header */}

Customer Reviews

Real feedback from verified purchasers

{/* Ratings Overview Card (3-column layout on md+) */}

{/* Col 1: Big Rating Display */}

4.8 out of 5

Based on 342 reviews

96% recommend

{/* Col 2: Rating Distribution Bars */}

{ratingBreakdowns.map((bar) => ( ))}

{/* Col 3: Customer Photos / Videos Gallery */}

Customer Photos (48)

Recent

{customerPhotos.map((photo, index) => ( ))}

{/* Write a Review Expandable Panel */} {isWritingReview && (

Write Your Review

Overall Rating

Your Name setNewAuthor(e.target.value)} type="text" placeholder="e.g. Alex Morgan" className="border-border bg-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border px-3 py-1 text-xs shadow-xs transition-colors focus-visible:ring-2 focus-visible:outline-none" />

Purchased Option setNewVariant(e.target.value)} type="text" placeholder="e.g. Color: Space Black · Size: L" className="border-border bg-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border px-3 py-1 text-xs shadow-xs transition-colors focus-visible:ring-2 focus-visible:outline-none" />

Review Headline setNewTitle(e.target.value)} type="text" placeholder="Summarize your experience in one sentence" className="border-border bg-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border px-3 py-1 text-xs shadow-xs transition-colors focus-visible:ring-2 focus-visible:outline-none" />

Detailed Feedback

setNewBody(e.target.value)}
                  rows={3}
                  placeholder="What did you like or dislike? How does it perform?"
                  className="border-border bg-background placeholder:text-muted-foreground focus-visible:ring-ring flex w-full rounded-md border px-3 py-2 text-xs shadow-xs transition-colors focus-visible:ring-2 focus-visible:outline-none"
                />
              </div>

<div className="flex items-center justify-end gap-2 pt-2">
                <Button
                  aria-label="Close review form"
                  type="button"
                  variant="outline"
                  size="sm"
                  className="h-8 text-xs"
                  onClick={() => setIsWritingReview(false)}
                >
                  Cancel
                </Button>
                <Button
                  type="button"
                  size="sm"
                  className="h-8 text-xs"
                  disabled={!newTitle.trim() || !newBody.trim() || newRating === 0}
                  onClick={submitReview}
                >
                  Submit Review
                </Button>
              </div>
            </div>
          </div>
        </Card>
      )}

{/* Review Filters & Sort Toolbar */}
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        {/* Filter chips */}
        <div className="flex flex-wrap items-center gap-2">
          <Button
            type="button"
            size="sm"
            variant={selectedRating === null && !withPhotosOnly && !verifiedOnly ? 'default' : 'outline'}
            className="h-8 rounded-full text-xs"
            onClick={resetFilters}
          >
            All Ratings
          </Button>
          <Button
            type="button"
            size="sm"
            variant={selectedRating === 5 ? 'default' : 'outline'}
            className="h-8 gap-1 rounded-full text-xs"
            onClick={() => toggleRatingFilter(5)}
          >
            <Star className={cn('size-3', selectedRating === 5 ? 'fill-current' : 'fill-warning text-warning')} />5
            Stars
          </Button>
          <Button
            type="button"
            size="sm"
            variant={withPhotosOnly ? 'default' : 'outline'}
            className="h-8 gap-1.5 rounded-full text-xs"
            onClick={() => setWithPhotosOnly(!withPhotosOnly)}
          >
            <ImageIcon className="size-3.5" />
            With Photos
          </Button>
          <Button
            type="button"
            size="sm"
            variant={verifiedOnly ? 'default' : 'outline'}
            className="h-8 gap-1.5 rounded-full text-xs"
            onClick={() => setVerifiedOnly(!verifiedOnly)}
          >
            <CheckCircle2 className="size-3.5" />
            Verified Only
          </Button>
        </div>

{/* Sort Dropdown */}
        <div className="flex items-center gap-2">
          <span className="text-muted-foreground text-xs font-medium">Sort by:</span>
          <Select value={sortBy} onValueChange={(val: any) => setSortBy(val)}>
            <SelectTrigger className="h-8 w-36 text-xs sm:w-40">
              <SelectValue placeholder="Sort by" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="recent">Most Recent</SelectItem>
              <SelectItem value="highest">Highest Rated</SelectItem>
              <SelectItem value="lowest">Lowest Rated</SelectItem>
              <SelectItem value="helpful">Most Helpful</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

{/* Reviews List */}
      <div className="space-y-4">
        {filteredReviews.length === 0 ? (
          <div className="border-border bg-card rounded-xl border p-12 text-center">
            <p className="text-foreground text-sm font-medium">No reviews match the selected filters</p>
            <p className="text-muted-foreground mt-1 text-xs">
              Try clearing your filters to view all customer feedback
            </p>
            <Button type="button" variant="outline" size="sm" className="mt-4 h-8 text-xs" onClick={resetFilters}>
              Reset Filters
            </Button>
          </div>
        ) : (
          filteredReviews.map((rev) => (
            <Card key={rev.id} className="border-border bg-card p-5 shadow-xs">
              <div className="space-y-4">
                {/* Header Row */}
                <div className="flex flex-wrap items-start justify-between gap-3">
                  <div className="flex items-center gap-3">
                    <Avatar className="border-border size-10 border">
                      {rev.avatar && <AvatarImage src={rev.avatar} alt={rev.author} />}
                      <AvatarFallback className="text-xs font-medium">{rev.initials}</AvatarFallback>
                    </Avatar>
                    <div className="space-y-0.5">
                      <div className="flex items-center gap-2">
                        <span className="text-foreground text-sm font-semibold">{rev.author}</span>
                        {rev.verified && (
                          <Badge
                            variant="secondary"
                            className="text-muted-foreground h-5 gap-1 px-1.5 text-xs font-normal"
                          >
                            <CheckCircle2 className="text-success size-3" />
                            Verified Buyer
                          </Badge>
                        )}
                      </div>
                      <time className="text-muted-foreground text-xs">{rev.date}</time>
                    </div>
                  </div>
                  <Rating value={rev.rating} readonly size="small" />
                </div>

{/* Review Content */}
                <div className="space-y-2">
                  <h5 className="text-foreground text-sm font-semibold sm:text-base">{rev.title}</h5>
                  <p className="text-muted-foreground text-xs leading-relaxed sm:text-sm">{rev.body}</p>
                </div>

{/* Product Variant */}
                {rev.variant && (
                  <div className="bg-muted/60 text-muted-foreground inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium">
                    <span>{rev.variant}</span>
                  </div>
                )}

{/* Attached Photos */}
                {rev.photos && rev.photos.length > 0 && (
                  <div className="flex flex-wrap gap-2 pt-1">
                    {rev.photos.map((photoUrl, pIdx) => (
                      <button
                        key={pIdx}
                        type="button"
                        className="group border-border bg-muted focus-visible:ring-ring relative size-16 cursor-pointer overflow-hidden rounded-lg border focus-visible:ring-2 focus-visible:outline-none sm:size-20"
                        aria-label={`Review photo ${pIdx + 1} by ${rev.author}`}
                        onClick={() => setActivePhotoUrl(photoUrl)}
                      >
                        <img
                          src={photoUrl}
                          alt={`Review photo ${pIdx + 1} by ${rev.author}`}
                          className="size-full object-cover transition-transform duration-300 group-hover:scale-105"
                        />
                      </button>
                    ))}
                  </div>
                )}

{/* Helpful Action Button */}
                <div className="border-border flex items-center justify-between border-t pt-3">
                  <p className="text-muted-foreground text-xs">Was this review helpful?</p>
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    className={cn(
                      'h-8 gap-1.5 text-xs',
                      rev.isHelpful && 'border-primary/40 bg-primary/10 text-primary font-medium',
                    )}
                    onClick={() => toggleHelpful(rev.id)}
                  >
                    <ThumbsUp className={cn('size-3.5', rev.isHelpful && 'fill-primary')} />
                    Helpful ({rev.helpfulCount})
                  </Button>
                </div>
              </div>
            </Card>
          ))
        )}
      </div>

{/* Pagination / Load More */}
      <div className="border-border flex flex-col items-center justify-between gap-4 border-t pt-6 sm:flex-row">
        <p className="text-muted-foreground text-xs">Showing 1-{filteredReviews.length} of 342 reviews</p>
        {!hasLoadedMore && (
          <Button type="button" variant="outline" size="sm" className="h-9 px-4 text-xs font-medium" onClick={loadMore}>
            Load More Reviews
          </Button>
        )}
      </div>

{/* Photo Modal / Lightbox */}
      {activePhotoUrl && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4 backdrop-blur-xs"
          onClick={() => setActivePhotoUrl(null)}
        >
          <div
            className="border-border bg-card relative max-h-[85vh] max-w-2xl overflow-hidden rounded-xl border p-3 shadow-sm"
            onClick={(e) => e.stopPropagation()}
          >
            <img
              src={activePhotoUrl}
              alt="Customer review photo preview"
              className="max-h-[75vh] w-auto rounded-lg object-contain"
            />
            <div className="flex items-center justify-between p-2 pt-3">
              <span className="text-muted-foreground text-xs">Customer Review Photo</span>
              <Button
                type="button"
                variant="ghost"
                size="sm"
                className="h-7 text-xs"
                onClick={() => setActivePhotoUrl(null)}
              >
                Close
              </Button>
            </div>
          </div>
        </div>
      )}
    </section>
  )
}
60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L61",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/avatar.json","https://uipkge.dev/r/react/badge.json","https://uipkge.dev/r/react/button.json","https://uipkge.dev/r/react/card.json","https://uipkge.dev/r/react/progress.json","https://uipkge.dev/r/react/rating.json","https://uipkge.dev/r/react/select.json"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"packages/registry-react/blocks/customer-reviews/CustomerReviews.tsx","content":"$63","type":"registry:block","target":"~/components/blocks/CustomerReviews.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>