Frontend changes in rating and revies of customers

frontend/src/components/ProductModal.jsx

@@ -48,7 +48,14 @@ function formatReviewDate(value) {
 function RatingsAndReviews({ rating, reviews }) {
   return (
     <section>
-      <h3 className="mb-2 font-display text-sm font-semibold text-ink-900">Ratings &amp; reviews</h3>
+      <div className="mb-2 flex items-baseline justify-between gap-3">
+        <h3 className="font-display text-sm font-semibold text-ink-900">Customer experience</h3>
+        {rating && (
+          <p className="truncate text-[11px] text-slate-500">
+            Published by {[...new Set(rating.sources.map((s) => s.site))].join(', ')}
+          </p>
+        )}
+      </div>
       <div className="grid gap-3 lg:grid-cols-[220px_1fr]">
         <div className="rounded-xl border border-ink-900/10 bg-white p-4">
           {rating ? (
@@ -62,6 +69,21 @@ function RatingsAndReviews({ rating, reviews }) {
                 {rating.count ? `${rating.count.toLocaleString('en-IN')} ratings across ` : 'Across '}
                 {rating.sources.length} platform{rating.sources.length === 1 ? '' : 's'}
               </p>
+              {rating.breakdown && (
+                <ul className="mt-3 flex flex-col gap-1" aria-label="Rating breakdown">
+                  {rating.breakdown.map((b) => (
+                    <li key={b.stars} className="flex items-center gap-2 text-[11px] text-slate-500">
+                      <span className="inline-flex w-7 shrink-0 items-center gap-0.5">
+                        {b.stars} <Star className="h-2.5 w-2.5 text-amber-500" fill="currentColor" strokeWidth={0} />
+                      </span>
+                      <span className="h-1.5 flex-1 overflow-hidden rounded-full bg-ink-100">
+                        <span className="block h-full rounded-full bg-amber-500" style={{ width: `${b.percent}%` }} />
+                      </span>
+                      <span className="w-8 shrink-0 text-right">{b.percent}%</span>
+                    </li>
+                  ))}
+                </ul>
+              )}
               <ul className="mt-3 flex flex-col gap-1.5 border-t border-ink-900/5 pt-2 text-xs">
                 {rating.sources.map((s) => (
                   <li key={s.source_url} className="flex items-center justify-between gap-2">