vercel__flags/examples/partial-prerendering/components/product-rating.tsx

import { StarIcon } from '@heroicons/react/24/solid';
import clsx from 'clsx';

export const ProductRating = ({ rating }: { rating: number }) => {
  return (
    <div className="flex gap-x-1">
      {Array.from({ length: 5 }).map((_, i) => {
        return (
          <StarIcon
            key={i}
            className={clsx('w-4', i < rating ? 'text-white' : 'text-gray-500')}
          />
        );
      })}
    </div>
  );
};