"use client"; import * as React from "react"; import { motion } from "motion/react"; import { cn } from "@kineticui/core"; export type RatingSummaryProps = { /** Count of ratings per star, index 0 = 1 star … index 4 = 5 stars. */ counts: [number, number, number, number, number]; /** Common themes with sentiment, e.g. { label: "Fast setup", count: 84, sentiment: "positive" }. */ aspects?: { label: string; score: number }[]; onFilter?: (stars: number | null) => void; className?: string; }; function Star({ fill }: { fill: number }) { const id = React.useId(); return ( ); } /** Compact rating overview: average with partial stars, clickable distribution bars and aspect scores. */ export function RatingSummary({ counts, aspects, onFilter, className }: RatingSummaryProps) { const [active, setActive] = React.useState(null); const total = counts.reduce((a, b) => a + b, 0); const avg = total ? counts.reduce((a, n, i) => a + n * (i + 1), 0) / total : 0; const recommend = total ? Math.round(((counts[3] + counts[4]) / total) * 100) : 0; return (

{avg.toFixed(1)} {[0, 1, 2, 3, 4].map((i) => )} {total.toLocaleString("en-US")} ratings

{[5, 4, 3, 2, 1].map((s) => { const n = counts[s - 1]!; return ( ); })}

{recommend}% would recommend this

{aspects?.length ? (

{aspects.map((a) => (

{a.label} {a.score.toFixed(1)} = 4 ? "bg-success" : a.score >= 3 ? "bg-warning" : "bg-danger")} initial={{ width: 0 }} animate={{ width: `${(a.score / 5) * 100}%` }} />

))}

) : null}

); }

Rating Summary

Installation

Exports