Reviews.jsx

1import { Icon } from "./Icon.jsx";23function Stars({ rating }) {4  const steps = Math.min(10, Math.max(0, Math.round(rating * 2)));5  const full = Math.floor(steps / 2);6  const half = steps % 2;7  return (8    <span className="stars" aria-hidden="true">9      {Array.from({ length: full }, (_, i) => (10        <Icon key={`full-${i}`} name="star" extra="lit" />11      ))}12      {half ? <Icon name="star_half" extra="lit" /> : null}13      {Array.from({ length: 5 - full - half }, (_, i) => (14        <Icon key={`none-${i}`} name="star" />15      ))}16    </span>17  );18}1920export function Reviews({ review, printful }) {21  if (!review || review.status !== "ok") return null;22  const count = Number(review.count).toLocaleString("en-US");23  return (24    <details className="drop">25      <summary>26        <span>Reviews</span>27        <Icon name="expand_more" extra="small" />28      </summary>29      <div className="inside">30        <p className="fine">31          <a href={printful} rel="noopener" title={`${review.rating} out of 5 on Printful`}>32            <Stars rating={review.rating} /> {`${review.rating.toFixed(1)} from ${count} ${review.count === 1 ? "review" : "reviews"}`}33          </a>34        </p>35        <p className="fine">{`Printful's customers wrote these about the blank ${review.title}, not about this design or this shop. Tap the rating to read them on Printful.`}</p>36      </div>37    </details>38  );39}