62: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"] 63: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"] 64:T53de,"use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } type Period = "all" | "recent"; export interface RatingPeriodData { /** Number of ratings for 5, 4, 3, 2 and 1 stars, in that order. */ counts: [number, number, number, number, number]; recommend: number; verified: number; attributes: { label: string; score: number }[]; /** Monthly average rating, oldest first. */ trend: number[]; } export interface RatingSnippet { id: string; rating: number; author: string; text: string; topics: string[]; recent: boolean; } export interface RatingSummaryBreakdownProps { product?: string; data?: Record; /** Where the product sits on a two-ended scale, 0 to 1. */ scale?: { label: string; low: string; high: string; value: number }; topics?: { label: string; positive: number; negative: number }[]; snippets?: RatingSnippet[]; onFilter?: (filter: { stars: number | null; topic: string | null; period: Period }) => void; onWriteReview?: () => void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", card: "#141414", title: "#FFFFFF", muted: "rgba(255,255,255,0.45)", body: "rgba(255,255,255,0.62)", line: "rgba(255,255,255,0.12)", track: "rgba(255,255,255,0.08)", accent: "#7CDE6A", accentText: "#0B1A08", danger: "#FF8A7A", star: "#F5C451", buttonBg: "#FFFFFF", buttonText: "#111111", ghost: "rgba(255,255,255,0.07)", ring: "rgba(255,255,255,0.55)", }, light: { bg: "#FFFFFF", card: "#F7F7F7", title: "#111111", muted: "rgba(0,0,0,0.45)", body: "rgba(0,0,0,0.62)", line: "rgba(0,0,0,0.1)", track: "rgba(0,0,0,0.07)", accent: "#2F9E44", accentText: "#FFFFFF", danger: "#C0392B", star: "#E0A100", buttonBg: "#111111", buttonText: "#FFFFFF", ghost: "rgba(0,0,0,0.05)", ring: "rgba(0,0,0,0.45)", }, }; const DATA: Record = { all: { counts: [612, 198, 61, 24, 17], recommend: 92, verified: 87, attributes: [ { label: "Sound", score: 4.7 }, { label: "Battery", score: 4.4 }, { label: "Comfort", score: 4.5 }, { label: "Value", score: 4.3 }, ], trend: [4.3, 4.35, 4.4, 4.38, 4.42, 4.45, 4.5, 4.48, 4.52, 4.55, 4.6, 4.62], }, recent: { counts: [140, 31, 9, 3, 2], recommend: 95, verified: 91, attributes: [ { label: "Sound", score: 4.8 }, { label: "Battery", score: 4.6 }, { label: "Comfort", score: 4.5 }, { label: "Value", score: 4.4 }, ], trend: [4.52, 4.55, 4.6, 4.62, 4.6, 4.64, 4.66, 4.63, 4.65, 4.68, 4.66, 4.7], }, }; const TOPICS = [ { label: "Sound quality", positive: 184, negative: 6 }, { label: "Battery life", positive: 121, negative: 22 }, { label: "Fit", positive: 96, negative: 31 }, { label: "Case", positive: 58, negative: 14 }, { label: "App", positive: 22, negative: 19 }, ]; const SNIPPETS: RatingSnippet[] = [ { id: "s1", rating: 5, author: "Priya K.", text: "The sound quality is honestly better than my old over-ears. Bass is tight, not boomy.", topics: ["Sound quality"], recent: true }, { id: "s2", rating: 5, author: "Marco D.", text: "Battery life easily gets me through two days of commuting, and the case tops it up fast.", topics: ["Battery life", "Case"], recent: true }, { id: "s3", rating: 4, author: "Jenna L.", text: "Great sound, but the fit took a while to get right. The smallest tips fixed it.", topics: ["Sound quality", "Fit"], recent: false }, { id: "s4", rating: 3, author: "Owen T.", text: "Fine for the price. The app keeps asking me to update and forgets my EQ settings.", topics: ["App"], recent: true }, { id: "s5", rating: 2, author: "Sara M.", text: "Left bud falls out when I run. Sound is good when it stays in.", topics: ["Fit", "Sound quality"], recent: false }, { id: "s6", rating: 1, author: "Ben R.", text: "Case hinge broke after a month. Support replaced it, but annoying.", topics: ["Case"], recent: false }, { id: "s7", rating: 4, author: "Aiko S.", text: "Battery life is good, noise cancelling on the train is the real win.", topics: ["Battery life"], recent: true }, { id: "s8", rating: 5, author: "Luis F.", text: "Comfortable for hours and the case slips into any pocket.", topics: ["Fit", "Case"], recent: true }, ]; function Stars({ value, size = 16, color, empty }: { value: number; size?: number; color: string; empty: string }) { const id = React.useId(); return ( ); } export function RatingSummaryBreakdown({ product = "Wireless Earbuds", data = DATA, scale = { label: "Noise cancelling", low: "Light", high: "Strong", value: 0.78 }, topics = TOPICS, snippets = SNIPPETS, onFilter, onWriteReview, theme = "dark", className, }: RatingSummaryBreakdownProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [period, setPeriod] = React.useState("all"); const [stars, setStars] = React.useState(null); const [topic, setTopic] = React.useState(null); const d = data[period]; const total = d.counts.reduce((a, b) => a + b, 0); const avg = d.counts.reduce((a, c, i) => a + c * (5 - i), 0) / total; const maxCount = Math.max(...d.counts); React.useEffect(() => { onFilter?.({ stars, topic, period }); }, [stars, topic, period, onFilter]); const list = snippets.filter((s) => (period === "all" || s.recent) && (stars === null || s.rating === stars) && (topic === null || s.topics.includes(topic))).slice(0, 3); // Trend sparkline geometry (pure arithmetic, same on server and client). const W = 220; const H = 56; const lo = Math.min(...d.trend) - 0.05; const hi = Math.max(...d.trend) + 0.05; const pts = d.trend.map((v, i) => [(i / (d.trend.length - 1)) * W, H - ((v - lo) / (hi - lo)) * H] as const); const path = pts.map(([x, y], i) => `${i ? "L" : "M"}${x.toFixed(1)},${y.toFixed(1)}`).join(" "); const ringC = 2 * 3.14159265 * 26; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const card = "rounded-2xl border p-5"; return (

{product}

Ratings & reviews

{( [ ["all", "All time"], ["recent", "Last 90 days"], ] as const ).map(([k, l]) => ( ))}

{/* Score + bars */}

{avg.toFixed(1)}

{String(total).replace(/\B(?=(\d{3})+(?!\d))/g, ",")} ratings

{avg.toFixed(1)} out of 5 stars from {total} ratings

{/* Recommend + verified + trend */}

{d.recommend}%

Would recommend

{d.verified}% from verified purchases

Rating over 12 months

= d.trend[0] ? p.accent : p.danger }}> {d.trend[d.trend.length - 1] >= d.trend[0] ? "▲" : "▼"} {Math.abs(d.trend[d.trend.length - 1] - d.trend[0]).toFixed(2)}

{/* Attributes */}

What owners rate

{a.label} {a.score.toFixed(1)}

{scale.label}

{scale.low} {scale.high}

{/* Topics + snippets */}

People mention

{topics.map((t) => { const on = topic === t.label; return ( ); })}

{stars || topic ? `Showing ${[stars ? `${stars}★` : "", topic ?? ""].filter(Boolean).join(" · ")}` : "Most helpful"}

{(stars || topic) && ( )}

{list.map((s) => (

{s.author}

{s.text}

))}

No reviews match that yet.

); } 61:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L62",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L63",null,{"files":[{"path":"registry/new-york/rating-summary-breakdown/rating-summary-breakdown.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]